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

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

EX0 - Default
Two images and no CSS.



EX1 - Position: Absolute & Relative
Making one image's position absolute and the other relative will create an overlay.



EX2 - Position: Relative & Relative
Both images can have a relative position but then top, right, bottom, or left will need to be utilized.



EX3 - Using Position & Float
Float can be used with relative position, but top, right, bottom, or left will need to be utilized.

  

    
  
  

    
  


EX4 - Background-image
With 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.

  

img Alone
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 CSSMojo.com.


EX5 - Position & z-index
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.



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.

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

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

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

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

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/