My CSS code is currently resizing the background image to fit the browser size while keeping the center of the image in the center of the window. Now, I need to add another image, like an icon in a circle, at the center following the same aspect ratio rule. How can I apply the same code to maintain the aspect ratio of my second image? And more importantly, how can I overlay another image onto the background at the center? I have even included an image of the background created 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>