Image over Image CSS

Question

I am creating a webpage and I am trying to put a png (buttons) over gif files. When the page renders, it makes the png file appear after or under the gif file. I tried using an

Answer 1

Each element in a page has a particular stacking order. If you do not set them explicitly then it will be stacked in accordance to the order in DOM.

You can control the stacking order by setting the property

z-Index

The higher the z-index value goes the higher will be the stacking order for the element.

If you can set the gif image as the background of a cell then

background-image

property will be the best one. First set the gif image as a background to the cell and place the png button in the cell and position it inside the cell.

Answer 2

Use the "background-image" CSS attribute on a block-level element (<div>, <td> etc.) for the background GIF, then place the PNG buttons inside that block element.

Like this:

<style type="text/css">
    div#withBackground {
        background-image: url('bitmaps/bg-image.gif');
        background-repeat: no-repeat;
    }
</style>

<div id="withBackground">
    <img src="bitmaps/fg-image.png" />
</div>

Answer 3

General Solutions

MDN is a great resource for questions like this one. The Understanding CSS z-index article provides various ways to accomplish what OP's after. A few are quickly covered below.

All Examples

This includes all six basic examples I setup.

.clear {
  clear: both;
}
.relPos {
  position: relative;
}
.absPos {
  position: absolute;
}
.relPos0 {
  position: relative;
}
.relPos1 {
  left: -154px;
  top: -33px;
  position: relative;
}
.floatLeft {
  float: left;
}
.floatRight {
  float: right;
}
.relPos2 {
  position: relative;
  right: 150px;
}
.bgImg {
  background-image: url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
  width: 150px;
  height: 84px;
}
.bgImg2 {
  background-image: url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
  width: 84px;
  height: 84px;
}
.relPos3 {
  position: relative;
}
.relPos4 {
  left: -154px;
  top: -33px;
  position: relative;
}
.relPos5 {
  left: 154px;
  top: 25px;
  position: relative;
}
.relPos6 {
  position: relative;
}
.relPos7 {
  left: 154px;
  top: 25px;
  position: relative;
  z-index: 2;
}

<h1>EX0 - Default</h1>
<p>Two images and no CSS.</p>
<img src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />

<h1>EX1 - Position: Absolute &amp; Relative</h1>
<p>Making one image's position absolute and the other relative will create an overlay.</p>
<img class="absPos" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />

<h1 style="padding-top:1em;">EX2 - Position: Relative &amp; Relative</h1>
<p>Both images can have a relative position but then <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> will need to be utilized.</p>
<img class="relPos0" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos1" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />

<h1>EX3 - Using Position &amp; Float</h1>
<p>Float can be used with relative position, but <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> will need to be utilized.</p>
<div style="width:200px;">
  <div class="floatRight relPos2">
    <img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
  </div>
  <div class="floatLeft">
    <img src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
  </div>
</div>

<h1 class="clear">EX4 - Background-image</h1>
<h2>With div</h2>
<p>Another easy way to overlay images is to make the back image a background image using the CSS property <code>background</code>. Anything inside the element with the background image will appear on top.</p>
<div class="bgImg">
  <img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
</div>
<h2>img Alone</h2>
<p>Instead of applying the background image on another element, it could be applied to the overlay image itself. The problem here is that the png overlay would need to be the same size as the background image. That's how you would position it over the jpg.
  Via <a href="http://www.cssmojo.com/png_overlay_with_no_extra_markup/" target="_blank">CSSMojo.com</a>.</p>
<img class="bgImg2" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" alt="" />

<h1>EX5 - Position &amp; z-index</h1>
<p>Order matters if z-index is not employed. EX6 is an example wher the ordering is correct and only top and left are used for the positioning.</p>
<img class="relPos3" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos4" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />

<h1>EX6 - Position &amp; z-index</h1>
<p>If both objects are relative, order will matter when using the <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> properties. Reordering the elements (see EX5) or using larger <code>z-index</code> values can resolve this issue.</p>
<img class="relPos5" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />

<img class="relPos7" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />

Instead of posting all the examples below, I am only including what I think will easily solve the OP's problem.

EX1 - Position: Absolute & Relative

Making one image's position absolute and the other relative will create an overlay.

.relPos {
    position: relative;
}
.absPos {
    position: absolute;
}

<img class="absPos" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />

EX2 - Position: Relative & Relative

Both images can have a relative position but then top, right, bottom, or left properties will need to be utilized.

.relPos0 {
    position: relative;
}
.relPos1 {
	left: -154px;
	top: -33px;
    position: relative;
}

<img class="relPos0" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos1" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />

EX4 - Background-image using a div

Another easy way to overlay images is to make the back image a background image using the CSS property background. Anything inside the element with the background image will appear on top.

.bgImg {
    background-image: url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
    width: 150px;
    height: 84px;
}

<div class="bgImg">
    <img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
</div>

EX6 - Position & z-index

If both objects are relative, order will matter when using the top, right, bottom, or left properties. Reordering the elements (see EX5) or using larger z-index values can resolve this issue.

.relPos5 {
	left: 154px;
	top: 25px;
    position: relative;
}
.relPos6 {
    position: relative;
}
.relPos7 {
	left: 154px;
	top: 25px;
    position: relative;
	z-index: 2;
}

<img class="relPos5" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />

<img class="relPos7" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />

Alternatives

CSS-Tricks covers a layering technique with CSS3 utilizing the background property only.

background: 
   url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(Paper-4.png);                      /* On bottom, like z-index: 1; */

via http://css-tricks.com/stacking-order-of-multiple-backgrounds/

Answer 4

Like other people said - if you want to put images on top of another, then you need z-indexing. Just remember, that z-index only works, if nested elements have position set - absolute or relative (static should not be used for this)