css - Placing background image over section divider

admin管理员组

文章数量:1333201

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.

/

Desired Outcome

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

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.

• css
• custom-background

Share Improve this question edited Jul 23, 2020 at 13:26 asked Jul 20, 2020 at 12:13 user191925user191925 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 Commented Jul 20, 2020 at 12:21
• Thanks for the advise. I'll try on there instead. – user191925 Commented Jul 20, 2020 at 12:24

Add a comment  | 

1 Answer 1

Sorted by: 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!

本文标签： cssPlacing background image over section divider