title: How to place background images on the top of each other?
body: <p>I have three background images and I would like them to be on the top of each other. Besides that, I would like to place them manually and not just align.</p>
  
  <p>How can I do this?</p>
  
  <p><a href="http://codepen.io/Alexnotonfire/pen/NxYmej" rel="nofollow noreferrer">My codepen</a></p>
  
  <pre><code>&lt;div class="first"&gt;&lt;/div&gt;
  &lt;div class="second"&gt;&lt;/div&gt;
  &lt;div class="third"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>-</p>
  
  <pre><code>.first {
    background: url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg") no-repeat;
    background-size: 100% 100%;
    height: 400px;
  }
  
  .second {
     background: url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;
    background-size: 300px;
    height: 200px;
  }
  
  .third {
       background: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif") no-repeat;
    background-size: 80px;
    height: 100px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/VpvTC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VpvTC.png" alt="enter image description here"></a></p>