Section layering

[blog42]

Hello!
I am trying to make the upper background layer of the 1st section display over the top separator of the 2nd section, (right now the top separator of the 2nd section is covering the upper background layer of the 1st section). How can I achieve that?

[paul.r]

Hi Robert,

Can you provide us your site url so we can take a closer look.

For the mean time, please set the z-index of your first section to a higher number

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

https://www.w3schools.com/cssref/pr_pos_z-index.asp

Thanks

[blog42]

Hi, thanks for the tip, but the thing is, I have an upper layer background, and a lower layer background, and I ONLY want the UPPER layer background to be on top of the separator of the 2nd section.

[christian]

Hey Robert,

Sorry for the confusion. The background could not overflow.

I’d recommend that you first turn off the top separator of your second section and setup the bottom separator of the first section.

Then, use an Image element and then you’ll need to position it using CSS. Here’s an example.

In that setup, you still need the first section’s z-index to be higher than the second section.

Here’s the code I’ve placed in the Image element’s Element CSS in that example. You can adjust it to fit your needs. If you need more than that, you need to consult with a third party developer.

$el {
  position: absolute;
  right: 0;
  top: 130px;
}

Hope that helps.

[blog42]

Yeah, the thing is that won’t work well with a lot of screen widths… Thanks for the help, though.

[rad]

You’re most welcome! Yes, you would need to utilize @media to make it work for every devices. Like form here https://www.w3schools.com/css/css_rwd_mediaqueries.asp Thanks!