Take the 2-minute tour ×

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 and tags but neither work. I have also tried using various CSS padding, alignments etc. but it doesn't seem to work. Is there a way (code) to get images to appear on top of images?

share|improve this question
add comment

4 Answers

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;

<div id="withBackground">
    <img src="bitmaps/fg-image.png" />
share|improve this answer
add comment

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


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


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.

share|improve this answer
The "z" in z-index refers to the 3-dimensional "axis" that extends through your screen; that's why it's called z-index. –  jtbandes Aug 28 '09 at 5:55
add comment

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)

share|improve this answer
add comment


you can control that by position absolute...

the image you want appear on top give it absolute position adjust its left right position and

you aredone.

share|improve this answer
add comment

Your Answer

