html - section after background set up overlapping the previous one

Question

One section overlaps the other one. Are there any solutions?

This is the first section:

<div class="background"> 
<div class = "row"> 
<div class="background-curtain"></div>
    <image source="picture.jpeg"> 
</div> 
</div> 


.background{ 
    position: relative;
}
.background-curtain{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, black, white);opacity: 0.3;
    z-index: -100;
}

This is the other one:

<section>
    <div class="background-some"></div>
</section>

.background-some{
    background: url(image.jpeg);
    height: 60%;
    width: 100%;
}

Answer 1

Can you try this:

<section>
    <div class="background"> 
        <div class = "row"> 
            <div class="background-curtain"></div>
            <img src="picture.jpeg"> 
        </div>
    </div> 
</section>
<section>
    <div class="background-some"></div>
</section>

CSS:

.background{ 
        position: relative;
        overflow: hidden;
    }
    .background-curtain{
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to top, black, white);opacity: 0.3;
        z-index: -100;
    }
    .background-some{
        background: url(background.jpeg);
        height: 60%;
        width: 100%;
    }