0

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

enter image description here

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

Improve this question
2
  • 1
    This doesn't appear to be specific to Wordpress development, so may get closed on that basis. You might want to look at asking your quesiton on a general Web Development StackExchange site, or StackOverflow
    – mozboz
    Jul 20, 2020 at 12:21
  • Thanks for the advise. I'll try on there instead.
    – user191925
    Jul 20, 2020 at 12:24

1 Answer 1

Reset to default
1

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:

  1. Move the image to section three, and adjust the position so that it's bottom: -150px instead of pinned to the top.
  2. 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!

enter image description here

Improve this answer
2
  • Hi Joe, If I want the background image to show on the white section and then disappear when it hits the grey part of the section above, how would I do this?
    – user191925
    Jul 23, 2020 at 13:07
  • Sorry, I misunderstood! You'd need to do a few things: 1. Change the divider so that instead of being at the bottom of the et_pb_section_5, it's at the top of et_pb_section_6. And instead of having a transparent top and a white bottom, it has a transparent bottom and a white top. 2. Set the z-index of section 5 to be at least 1. 3. Set the z-index of your new divider to be 1 as well. Does that help?
    – joe
    Aug 5, 2020 at 3:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy