<!DOCTYPE html>
<html>
<head>
<style>
#fon {
background: url("fon.png") no-repeat top / 100% 100%;
width: 100%; height: 100vh; position: relative; z-index: 0;
}
#main-img {
background: url("mainimg.png") no-repeat top / 100% 100%;
width: 100%; height: 100vh; position: absolute; z-index: 1;
}
#child-img-left {
background: url("childimgleft.png") no-repeat top / 100% 100%;
width: 100%; height: 100vh; position: absolute; z-index: -1;
}
#child-img-right {
background: url("childimgright.png") no-repeat top / 100% 100%;
width: 100%; height: 100vh; position: absolute; z-index: -1;
}
</style>
</head>
<body style="margin:0;">
<div id="fon">
<div id="main-img">
<div id="child-img-left"></div>
<div id="child-img-right"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.fon {
background-color: yellow; border: 6px solid dimgray;
width: 500px; height: 300px; position: relative;
z-index: 0;
}
.main {
background-color: red; border: 3px solid dimgray;
width: 60%; height: 60%; left: 20%; bottom: 0; position: absolute;
z-index: 1;
}
.child-left {
background-color: green; border: 3px solid dimgray;
width: 20%; height: 80%; left: 10%; position: absolute;
z-index: -1;
}
.child-right {
background-color: green; border: 3px solid dimgray;
width: 20%; height: 80%; right: 10%; position: absolute;
z-index: -1;
}
.dummy {
width: 100%; height: 100%;
transform: rotate(0.1turn);
}
</style>
</head>
<body>
<div class="fon">fon
<div class="dummy">
<div>
<div class="main">main</div>
</div>
<div class="dummy">
<div class="child-left">child</div>
<div class="child-right">child</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#fon {
background: url("fon.png") no-repeat top / 100% 100%;
width: 100%;
height: 100vh;
position: relative;
z-index: 0;
}
#main-img {
background: url("mainimg.png") no-repeat top / 100% 100%;
width: 100%;
height: 100vh;
position: absolute;
z-index: 1;
}
#child-img-left {
background: url("childimgleft.png") no-repeat top / 100% 100%;
width: 100%;
height: 100vh;
position: absolute;
z-index: -1;
}
#child-img-right {
background: url("childimgright.png") no-repeat top / 100% 100%;
width: 100%;
height: 100vh;
position: absolute;
z-index: -1;
}
</style>
</head>
<body style="margin:0;">
<div id="fon">
<div id="child-img-left"></div>
<div id="child-img-right"></div>
<div id="main-img"></div>
</div>
</body>
</html>