title: How to set png img over video background?
body: <p>I want to put a png over my background video, but the png is behind it.</p>
  
  <p>I tried using z-index, but then the video dissapears ( when I change the position from relative to absolute or fixed). Here is my hmtl and css code:</p>
  
  <pre><code>&lt;div id="page2"&gt;
      &lt;video autoplay loop muted id="video"&gt;
          &lt;source src="Images/KeyboardVideo.mp4"&gt;
          &lt;source src="Images/KeyboardVideo.webm"&gt;
      &lt;/video&gt;
  
      &lt;div id="servicelogo"&gt;&lt;img src="images/htmlcssjs.png"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
  /* CSS Document */
  
  * {margin: 0; padding: 0;}
  
          body{
              font-family: arial,helvetica;
              color: black;
              text-align: center;
          }
  
          h1{
              font-size: 6em;
              padding-top: 305px;
              opacity: 0.8;
          }
  
          p{
              font-size: 2em;
          }
  
  
  #wrapper {
      position: fixed;
      height: 80px;
      width: 100%;
      background-color: black; 
      z-index: 500;
  }
  
  #nav {
      height: 80px;
      width: auto;
      float: right;
      list-style: none;
      position: relative;
      margin-right: 100px;
      z-index: 500;
  }
  
  #nav li {
      height: 80px;
      width: 100px;
      float: left;
      font-family: sans-serif;
      font-weight: bold;
      color: white;
      padding: 0px 15px 0px 15px;
      text-align: center;
      line-height: 80px;
      font-size: 20px;
  }
  
  #video {
  position: relative;
  width: auto;
  min-width: 100%;
  height: auto;
  background: transparent url(images/Nature2.jpg) no-repeat;
  background-size: cover;
  z-index: -1
  }
  
  #servicelogo img{
      position: relative;
      height: 40%;
      width: 40%;
      margin-top: 8%;
      opacity: 0.8;
  }
  
  #page2 {
      width: 100%;
      max-height: 100%;
      overflow: hidden;
      top: 0;
      right: 0;    
  }
  
  a {text-decoration: none;}
  
  /* unvisited link */
  a:link {
      color: white;
  }
  
  /* selected link */
  a:active {
      color: #7f8c8d;
  }
  
  /* visited link */
  a:visited {
      color: white;
  }
  
  /* mouse over link */
  a:hover {
      color: #7f8c8d;
  }
  
  
  #page1  {background-image: url(images/Nature1.jpg); z-index: -1;}
  #page3 {background-image: url(images/Nature2.jpg);}
  #page4 {background-color: #2ecc71;}
  </code></pre>