CODEWITHSUNDEEP
htmlcssbackground-image
Alex Nikolsky
Alex Nikolsky

Reputation: 2179

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

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

enter image description here

Upvotes: 1

Views: 2452

Answers (4)

coder3521
coder3521

Reputation: 2646

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

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122057

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>

Upvotes: 1

Horia Rudan
Horia Rudan

Reputation: 178

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.

Upvotes: 1

Michiel Buisman
Michiel Buisman

Reputation: 11

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.

Upvotes: 1

Related Questions