image with lower z-index goes on content

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>