раздел после создания фона перекрывает предыдущий

Question

Один раздел перекрывает другой.Есть ли какие-то решения?

Это первый раздел:

<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;
}

Это другой раздел:

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

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

Answer 1

Можете ли вы попробовать это:

<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%;
    }