I have three images img1.png, img2.png, img3.png with heights 600px,400px and 200px respectively. My goal is to position these images in a specific order: img1.png in the back, img2.png in the middle, and img3.png in the front. I attempted to use CSS position attributes without success. I have placed the images as backgrounds for three different divs:
<div id="clouds1"></div>
<div id="clouds2"></div>
<div id="clouds3"></div>
<style>
#clouds1
{
background:url('images/img1.png');
height:600px;
position:absolute;
z-index:1;
}
#clouds2
{
background:url('images/img2.png');
height:400px;
position:relative;
z-index:8;
}
#clouds3
{
background:url('images/img3.png');
height:200px;
position:relative;
z-index:99;
}
</style>
Can someone provide guidance on how to achieve this using the CSS position attribute or another method? Your assistance is greatly appreciated. Thank you.