image with lower z-index goes on content - css

Question

I'm trying to create a header hero but my problem is that my background image goes on all my contents. Actually it has lower z-index than content but I don't know why doesn't it go on background.
.header
{
width: 100vw;
background-color: blue;
position: relative;
}
.headerbakground
{
position: absolute;
width: 100%;
z-index: 1;
}
.header ul li img,.header ul li
{
width: 2vw;
float: right;
}
.header .container
{
z-index: 2;
}
<div class="header">
<!--background image-->
<img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
<!--header top-->
<div class="container">
<ul>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
<li><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png" ></li>
</ul>
</div>
</div>

Answer 1

Only a positioned element can use z-index. According to MDN:
The z-index property specifies the z-order of a positioned (that is, one with any position other than static) element and
its descendants.
The .container doesn't have a position, so the z-index: 2 is ignored. Add position: relative to it:
.header .container {
position: relative;
z-index: 2;
}
.header {
width: 100vw;
background-color: blue;
position: relative;
}
.headerbakground {
position: absolute;
width: 100%;
z-index: 1;
}
.header ul li img,
.header ul li {
width: 10vw;
float: right;
}
.header .container {
position: relative;
z-index: 2;
}
<div class="header">
<!--background image-->
<img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
<!--header top-->
<div class="container">
<ul>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
</ul>
</div>
</div>
You can also use a negative z-index: -1 on the element you want to push back:
.headerbakground {
position: absolute;
width: 100%;
z-index: -1;
}
.header {
position: relative;
width: 100vw;
background-color: blue;
}
.headerbakground {
position: absolute;
width: 100%;
z-index: -1;
}
.header ul li img,
.header ul li {
width: 10vw;
float: right;
}
<div class="header">
<!--background image-->
<img src="https://www.renonation.sg/wp-content/uploads/2015/01/title-header-hero-01.jpg" class="headerbakground">
<!--header top-->
<div class="container">
<ul>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
<li>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1832-200.png">
</li>
</ul>
</div>
</div>