How to overlay a picture on another?

Question

What is a good way to overlay an image on another in HTML and CSS or jQuery?

Answer 1

There are several ways.

• Set one image as the background on the container and put another image in it.
• The position (possibly relative, but almost certainly absolutely) of one image on top of another
• Negative margin game

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

Answer 2

CSS. . , DIV ( ), DIV, . CSS.

HTML:

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

CSS

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

, , CSS, , top , ( HTML z-index).

JsFiddle ( )

Answer 3

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