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

i have 3 background images , them on top of each other. besides that, place them manually , not align.

how can 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; } 

with css3, can apply multiple backgrounds elements. can set custom background-position each background.

the first value horizontal position , second value vertical. top left corner 0% 0%. right bottom corner 100% 100%. if specify 1 value, other value 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>