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

<div class="container">
  <img src="background.png" class="my-background">
  <img src="stickfig1.png" class="stickfigures jane">
  <img src="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