In html how do you have an image overlapping an other image?

Question

How do you get an image to overlap another image , I can get text to overlap my background image but i wanted a series of images on top of that image.

poor arguments. try making a effort to produce a more argumented question, nobody willl guess what you want, — christian, Jun 13 '16 at 14:05

score 3 · Accepted Answer · answered Jun 13 '16 at 14:08

Simply use z-index, the higher the number, the higher it stacks in the pile (ie - closer to the viewer):

img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.image1 {
  z-index: 9999;
  width: 100px;
  height: 100px;
}
.image2 {
  z-index: 999;
  width: 200px;
  height: 200px;
}
.image3 {
  z-index: 99;
  width: 300px;
  height: 300px;
}
.image4 {
  width: 400px;
  height: 400px;
}

<img class="image1" src="http://gallery.photo.net/photo/6182716-md.jpg">
<img class="image2" src="http://gallery.photo.net/photo/12682192-md.jpg">
<img class="image3" src="http://gallery.photo.net/photo/2568318-md.jpg">
<img class="image4" src="http://gallery.photo.net/photo/6506352-lg.jpg">

score 1 · Answer 2 · answered Jun 13 '16 at 14:07

Well, if you only want an image above your background image, then just place your image in what ever content you have. If you want images over images, use z-index

Apply a z-index to each of your images, with the highest number being the "highest" image.

Z-index: 1;
Z-index: 2;
Z-index: 3;

Etc etc.

score 0 · Answer 3 · answered Jun 13 '16 at 14:06

0

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Higher the value of z-index comes in front.

answered Jun 13 '16 at 14:06

psuresh

535
2
13
25

In html how do you have an image overlapping an other image?

3 Answers3