Overlay image using css over background image which has fixed aspect ratio

Question

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!

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!

CSS

    #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;
    }

HTML

    <div id=stage>
    <img src="cutest_child_in_the_world-wallpaper-5120x3200.jpg" />
    </div>

Answer 1

If all you want to do is overlay another image positioned exactly like the first one, then you could just re-use your existing code. Add another div with another image and change the #stage ID to a class.

The second image would of course need some transparency in order to see anything of the first... and probably be the exact same size to achieve the desired effect.

Here a jsfiddle.