Hi,
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?
Use the "background-image" CSS attribute on a <div>, <td> etc. for the background GIF, then place the PNG buttons inside that div or td. This should work with any block-level HTML element.
EDIT: 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>
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.
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)