How to align overlapping images, centered with synchronous resizing? - html

Question

I am trying to achieve this composite image from a combination of images:
I have tried div tags with relative positioning and z-indices, but to no avail. Complicating things is that I need the composite image to be able to resize automatically, with all sub-images resizing appropriately yet staying aligned.
The solution needs to be html and css only. No javascript. And not nested svgs (I need this to also be appropriate for bitmap images).
Here is my feeble attempt:
https://jsfiddle.net/kb0sgd7h/1/
<div style="width:100%;position:relative; z-index:0; text-align: center; display: block;">
<div style="positive:absolute; width: 100%; height: 100%; left:10; top:0; z-index:1;text-align: center;display: block;">
<img src="https://raw.githubusercontent.com/lnjustin/svgtest/master/circles.svg"/>
</div>
<div style="positive:absolute; width: 80%; height: 80%; left:10; top:0; z-index:0;text-align: center;display: block;">
<img src="https://raw.githubusercontent.com/lnjustin/svgtest/master/justin.svg"/>
</div>
<div style="positive:absolute; width: 80px; height: 80px; left:0; top:0; margin-top:-100px; z-index:2;text-align: center;display: block;">
<img src="https://raw.githubusercontent.com/lnjustin/svgtest/master/stay-home.svg"/>
</div>
<div style="positive:absolute; width: 80px; height: 80px; left:0; top:-100; margin-top:-100px; z-index:2;text-align: center;display: block;">
<img src="https://raw.githubusercontent.com/lnjustin/svgtest/master/employee.svg"/>
</div>
</div>
How do I do this??

Answer 1

One approach you can use is to have multiple background-images (each with their own background-position and background-size). I've included a demo with a stock image and two blue circles composited on top. Everything should scale together as you resize the page.
body {
margin: 0;
}
div {
width: 100%;
padding-top: 100%;
background-repeat: no-repeat;
background-position: bottom 10% left 10%, bottom 10% right 10%, center;
background-size: 20%, 20%, cover;
background-image: url('https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png'), url('https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png'), url('https://www.b3multimedia.ie/wp-content/uploads/2017/06/free-stock-images-websites.jpg');
}
<div></div>