Placing background image over section divider

Question

I'm looking for a solution that will allow me to add an image that will sit over a section divider, but then be hidden behind the section its self.
If you look at this section on the website you can see the image disappears beneath the divider. I'm trying to make it sit on top of the divider then hide underneath section like the mockup I've created below.
https://snapstaging.co.uk/thesnapagency/
Desired Outcome

I'd appreciate any guidance or help that can provided on my issue.

joe · Answer

It looks like you're using Divi, and you've placed the image in the column that Divi is calling "Section 4" on that page.
If you want the image to appear in section 3 and get cut off by the divider, then you have a couple of solutions:

Move the image to section three, and adjust the position so that it's bottom: -150px instead of pinned to the top.
Or add the image to its own column, position it, and set it to hide behind section 4.

Option 1 might be a lot easier.
Below is a screenshot of what Option 1 will look like in CSS. You don't have to actually write this CSS code -- this is just for reference.
If you have any questions, feel free to reply!

Placing background image over section divider

One Answer

Add your own answers!

Ask a Question