How To Set Responsively Images On Images To Appear Fixed Using Html+css+js?

I got a task where I have to rewrite an old Adobe Flex application in HTML, CSS, JavaScript. It is an application for customers to demonstrate our product with several images (imag

Solution 1:

I made some changes in your exemple :

HTML

<divclass="container"><imgsrc="background.png"class="my-background"><imgsrc="stickfig1.png"class="stickfigures jane"><imgsrc="stickfig2.png"class="stickfigures james"></div>

CSS

.container {
    position: relative;
    width: 100%;
    height: auto;
}
.my-background {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height:auto
}
.stickfigures {
    position: absolute;
    z-index: 10;
}
.jane {
    left: 5%;
    top:20%;
    width: 20%;
}
.james {
    left: 60%;
    top:50%;
    width: 15%;
}

Please see the demo : JSFiddle