Overlap Image on section

Hi guys,

I am new to Webflow and I am trying to create sections that look diagonal and I want the image in the previous section to overlap on top of the diagonal. So I did use a section and div block to create a diagonal effect but I cannot figure out how to make the image show on the diagonal div block instead of getting out and I am facing the same issue at the bottom side where the diagonal shape is too big and I don’t want this much space so I would like the section after that to overlap on the diagonal div block as well.

My section is made on hero layout and image is attached. Thanks for the help!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @bilalwebflow,

Welcome to the forum!

To be able to look into this further, could you please provide us with a Read-only link to your website?

In the meantime, you could try changing the image to position: relative and then applying a high z-index value (for example 99999) - more on this here:

1 Like


I think the easiest way here to add a div-block inside your hero section, without making a new section for it, this way you don’t have to overlap the next section.

Set it to position absolute and fix it at the bottom.

Give it 100% width and custom height. Add diagonal background with gradient.

Change z-index for the image as Milan said.

Hope that helps!