How to place background images on the top of each other? - html

Question

I have three background images and I would like them to be on the top of each other. Besides that, I would like to place them manually and not just align.
How can I do this?
My codepen
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
-
.first {
background: url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg") no-repeat;
background-size: 100% 100%;
height: 400px;
}
.second {
background: url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;
background-size: 300px;
height: 200px;
}
.third {
background: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif") no-repeat;
background-size: 80px;
height: 100px;
}

Answer 1

With CSS3, you can apply multiple backgrounds to elements. You can also set custom background-position for each background.
The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
body, html {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 100vh;
background-image: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif"),
url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif"),
url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg");
background-size: 80px, 300px, cover;
background-repeat: no-repeat;
background-position: 50% 90%, 50% bottom, center;
}
<div></div>

Answer 2

You can place the DIVs on top of each other, with position:absolute. Then your DIVs need a width in order to be visible. Each DIV now can have a z-index with which you can determine who goes on top.
See this fork of your pen.

Answer 3

You can use multiple backgrounds for just one div, using css3, like so:
background:
url(3.png) 600px 10px no-repeat, /* On top, like z-index: 3; */
url(2.png) 100px 100px no-repeat, /* like z-index: 2; */
url(1.png) 50px 50px no-repeat; /* On bottom, like z-index: 1; */
The example code above uses shorthand, but you can also write it like this:
background: url(3.png), url(2.png), url(1.png);/*left to right: top, middle, bottom*/
background-size: 600px 10px, 100px 100px, 50px 50px;
Learn more about multiple backgrounds.

Answer 4

Try out this one :
<div id="container">
<div id="main_image"></div>
<div id="overlay_image"></div>
</div>
#container{
position: relative;
width: 200px;
height: 200px;
}
#main_image{
width: 100%;
height: 100%;
background: blue;
}
#overlay_image{
position: absolute;
bottom: 10px;
right: 10px;
width: 30px;
height: 30px;
background: red;
}
in your case you might just need to change the
background : url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;
also you need to adjust the pixel of the images .
Hope this helps