How to make section's background upper/lower layer overlapp into section above?

Support
#1

Hi,

please see here on our new staging site. I am trying to make the plant on the left site, which is a background upper layer of section 2, to overlap to section 1.

I’ve added
$el .x-bg {
top:-40px;
}

to the element css of section 2 and set the z-index of section 2 to 999 and of section 1 to 99.

In the example link above you will think that it’s working… yes it is BUT only as long as I leave the background color of section 2 transparent. But we want to give it a colour, too. When I give it a colour it will of course overlap section 1 with this colour.

So my question is how to only make one of the layers (the layer with the png) overlap to the section above? I’ve tried giving negative margin to the layer but it goes under section 1. Playing with the z-indexes did not help.

Thanks!

#2

Hello Alex,

Thanks for writing in!

Please understand that the .x-bg is the container of both the upper and lower layer. You will have to set the CSS overflow property of .x-bg to “visible” and then use the lower layer or upper layer (whichever you have placed your background image) to move up. Breaking down the code, it could be like this:

$el .x-bg {
    overflow: visible;
}

$el .x-bg .x-bg-layer-upper-image {
    top: -40px;
}

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector of the background layer you need to use. Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Best Regards.

#3

Sounds like a really good answer - again! Thank you, I will work this through starting on Monday.

#4

You’re welcome. Glad we’re able to help.

1 Like
#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.