How can I create a custom section divider using a png image?

[charlirene]

I want to use an image that looks like a ripped piece of paper as a section divider on a website. It will be used several times but since it has a jagged edge, I think I need to adjust the top and bottom margin along with the z-index. I want the background from the sections above and below to flow behind the image divider.

I used this code in a custom liquid section: 

<style>

.divider-img{

      width: 100%;

    }

</style>

<div>

<img src="https://cdn.shopify.com/s/files/1/0254/7364/6645/files/horizontal-page-tear.png?v=1721944192" class="divider-img"> 

</div>

[Gideon11]

You're already half-way there, all you have to do is learn about absolute and relative positioning, and also the insets that comes with these properties, then find a way to apply them here.
I'd like to provide exact code but there's no way to check if it works here..

You could also try out negative margins, either will work, you just gotta understand what you're doing

[charlirene]

Thanks for the tip! Here's what I have so far: 

<style>

.divider-img{

      width: 100%;

    position: relative;

    margin-top: -15%;

    margin-bottom: -6%;

    z-index: 1;

}

</style>

<div>

<img src="https://cdn.shopify.com/s/files/1/0254/7364/6645/files/horizontal-page-tear2.png?v=1722022633"class="divider-img"> 

</div>

There's still a small space above the image divider. Changing the margin in the current code it's working anymore as if it's reached its height limit.