I have designed a webpage where I need to layer three images in a specific order to create a background for content placement without any movement during scrolling. Fixed positioning is not suitable for this purpose. Below is the sequence in which the images should appear, from back to front (1-3):
- sky.jpg - Background image
- backDrop.png - Positioned above sky.jpg
- BtmRight.png - Intended to be positioned above all other images at the bottom right corner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
html {
height: 100%;
margin: 0;
padding: 0;
margin-top:100px;
background: url(sky.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#imgBack {
width: 100%;
margin-top:100px;
position:absolute;
z-index:20;
border:#0FF thin solid;
}
#imgBtmRight {
position:absolute;
z-index:50;
bottom:0;
right:0;
}
</style>
<body>
<img id="imgBtmRight" src="BtmRight.png" width="413" height="283" />
<img id="imgBack" src="backDrop.png" />
</body>
</html>
If you can shed some light on this issue or provide assistance, it would be greatly appreciated. Thank you.