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
Post a Comment for "How To Set Responsively Images On Images To Appear Fixed Using HTML+CSS+JS?"