Layering Images in CSS - Possible to Put 2 Images in Same Element

Layering images in CSS - possible to put 2 images in same element?

In short, it's not possible. You can do this, but you need to add a second HTML object to the page to get it to work. So for example, place a div block right below your body, and assign the second background to that object.

Hope this helps!

How do I position one image on top of another in HTML?

Ok, after some time, here's what I landed on:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://via.placeholder.com/50" />
  <img class="image2" src="https://via.placeholder.com/100" />
</div>

Placing multiple images in the same position

Add position:relative to your .images class. Absolutely positioned elements are positioned with respect to their closest positioned ancestor element.

How overlay two pictures to another using HTML-CSS?

If you want to overlay a image over another one you just have to make the second one have an absolute position, and with z-index determine wich one will be on the top, like this:

.top {  position: absolute;  left: 100px;  top: 100px;  border: 1px solid black;  z-index: 1; }

<div>
<img src="http://placehold.it/150x150"><img class="top" src="http://placehold.it/150x150">
</div>

Can I set two background images on the same element with CSS?

You could do this:

<td class="a"><div class="b">...</div></td>

Then the td will have the first background, and the div inside it will have the second. If one is transparent, the other will show through. I think b.png will be on top, but I'm not sure about that.

Can you layer pictures on top of each other on a webpage?

The short answer is yes.

There are many ways of handling this. With HTML/CSS you can throw elements on top of each other easily.

HTML:

<img id="imga" src="img1.png"/>
<img id="imgb" src="img2.png"/>
<img id="imgc" src="img3.png"/>

CSS:

img
{
    position:absolute;
    top: 0px;
    left: 0px;
}

So let's take a look at what's important here. You have 3 images in your HTML document (imga, imgb, and imgc). In order to overlay these, you have to first set their position to absolute so that the images will ignore any default layout behaviors. Then, you can use the left and top property to define the x,y coordinates of the img elements, respectively. In the example above, all of the elements are overlayed in the top-left corner of the page. In order control which image ends up on top, you can use the z-index property like so:

#imga
{
z-index: 10;
}

#imgb
{
z-index: 20;
}

#imgc
{
z-index: 30;
}

This will make imgc appear in front, imgb appear behind imgc, and imga behind everything else. The z-index property assigns which element goes in front of another. The element with the greatest z-index goes on top, followed by the second greatest and so on.

For your project, we can slightly tweak the code above:

HTML

<img id="layer1" src="img1.png"/>
<img id="layer2" src="img2.png"/>
<img id="layer3" src="img3.png"/>

CSS

img
{
position:absolute;
top: 0px;
left: 0px;
}
#layer1
{
   z-index: 10;
}
#layer2
{
z-index: 20;
}

#layer3
{
z-index: 30;
}

Since you now understand what lies where, you know that layer3 is on top (accessories layer), layer2 is in the middle (your person). and layer1 is on the bottom (the background). Then you can create accessories like so:

<img src="accessory1.png" onClick="setAccessory('accessory1.png');"/>

And then using javascript, you can set the first layer's src equal to the clicked accessory's.

function setAccessory(path){
     document.getElementById('layer1').src = path;
     //if you're using jQuery, $("#layer1").attr("src", path);
}

You can create as many accessories as you want. Say you want to add more accessories on top of your person, then you can easily create more layers, assign their z-indexes (and even do this dynamically using javascript, how exciting!)

In conclusion, I hope you found this little tutorial useful. For your purposes, I suggest taking a look at jQuery as well as the element. They will be fun to use and certainly help your application.

Good Luck with your application.

How can we overlap two images using css style?

.under {  position: absolute;  left: 0px;  top: 0px;  z-index: -1;}
.over {  position: absolute;  left: 40px;  top: 10px;  z-index: -1;}

<img src="https://tafttest.com/184x46.png" width="184" height="46" class="under" /><img src="https://tafttest.com/100x84.png" width="100" height="84" class="over" />

Multiple background images positioning

Your problem is that the repeat-y is going to fill the whole height, no matter where you position it initially. Thus, it overlaps your top and bottom.

One solution is to push the repeating background into a pseudo element positioned off of the container by the 12px at the top and bottom. The result can be seen here (the opacity in the demo is just to show that there is no overlap going on). Without opacity, see here. The relevant code (tested in CSS3 browsers: IE9, FF, Chrome):

CSS

div {
    position: relative;
    z-index: 2;
    background: url(top.png) top left no-repeat, 
                url(bottom.png) bottom left no-repeat;
}

div:before {
    content: '';
    position: absolute;
    z-index: -1; /* push it to the background */
    top: 12px; /* position it off the top background */
    right: 0;
    bottom: 12px; /* position it off the bottom background */
    left: 0;
    background: url(middle.png) top left repeat-y;
}

If you needed or wanted IE8 support (which does not support multiple backgrounds), then you could put the top background in the main div, and put the bottom background in by using the div:after pseudo element positioned to the bottom of the container.

Multiple background images/gradients for same element, declared in different statement, in CSS3

You can't use multiple background in separate background statements. If you want multiple backgrounds, you have to declare them all in one background statement. This is because in multiple background statements, the rendering engine assumes you mean to replace the previously-set background with the new one, instead of adding to what's there.

One thing I generally do with CSS3, particularly when still needing all of the vendor prefixes, is to put all the CSS3 into its own file. That way, the rest stays readable and it's not mixed into the main CSS.

---

Related Topics