CODEWITHSUNDEEP
javascriptjqueryhtmlcss
aneuryzm
aneuryzm

Reputation: 64834

How to overlay a picture with another one?

What's a good method to overlay a picture with another one in HTML and CSS or jQuery?

Upvotes: 3

Views: 4791

Answers (3)

russjman
russjman

Reputation: 506

html:

<div class="box">
  <img src="background.jpg" class="under" alt="" />
  <img src="overlay.jpg" class="over" alt="" />
</div>

css:

.over {
    position:absolute;
    z-index:100;  
}

.under {
    position:absolute;
    z-index:99;
}

.box {
    position:relative;
}

Upvotes: 1

Peter Ajtai
Peter Ajtai

Reputation: 57685

The simplest is CSS positioning. Absolutely position the images in the same location. Make sure that the parent DIV is relatively positioned (or not default positioned), so that the absolute positions of the images are within the parent DIV and not the window. This should work in pretty much all browsers with CSS support.

HTML:

<div id="gallery">
    <img src="..." ... />
    <img src="..." ... />
</div>

CSS:

#gallery { position: relative; }
#gallery img { 
    position: absolute;
    top:0;
    left:0; }

If you want to make sure that the images completely cover each other up, you could also set the height and width with the CSS, or you can just make sure that the images are all the same size, or that the ones on top are bigger than the ones below (top and below dependent on order in the HTML or z-index).

JsFiddle example (test in many browsers)

Upvotes: 5

Quentin
Quentin

Reputation: 943564

There are a few ways.

  1. Set one image as a background on a container, and put the other image inside it
  2. Position (possibly relatively but almost certainly absolutely) one image on top of the other
  3. Play with negative margins

Which is best depends on exactly what you are trying to achieve (including the semantics of what you are trying to express).

Upvotes: 7

Related Questions