title: Overlay image using css over background image which has fixed aspect ratio
body: <p>I have this CSS code which resizes background image according to the browser size keeping the centre of the image always at the centre of browser window! Now the issue is that I need to add another image right at the centre like a icon in the circle which also follows the same rule of maintaining the aspect ratio!</p>
  
  <p>How do I apply the same code to maintain aspect ratio to my second image? And primarily, how do I add another image overlaying the background right at the centre? I have also attached the image of the background achieved using Photoshop! </p>
  
  <p><img src="https://i.stack.imgur.com/sDFxy.jpg" alt="enter image description here"></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    #stage {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
      }
  
      #stage img {
        position:absolute;
        margin:auto;
        min-width:50%;
        min-height:50%;
        top:0;
        left:0;
        right:0;
        bottom:0;
      }
  
      @media screen and (max-width: 512px) {
        #stage img {
        width:100%;
        height:auto;
      }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div id=stage&gt;
      &lt;img src="cutest_child_in_the_world-wallpaper-5120x3200.jpg" /&gt;
      &lt;/div&gt;
  </code></pre>