Image on top of an image

[rizlaa]

Hi,

I'm trying to place an image on top of an image and was wondering how you would do this using html?

Thanks,
Riz

[ItsMeOnly]

there are several ways to do it, most notable creating absolutely/relatively positioned divs containing images, and images with background images set by stylesheet

[rizlaa]

I have tried using the following bit of code:


<td>
<div height="24" style="position:relative; top: 0; left: 0;"><img hspace="0" align="left" width="18" height="24" src="img1.gif">
<div height="24" style="position:absolute; top: -4; left: 0;"><img hspace="0" align="left" width="18" height="24" src="img2.gif">
</div></div>
</td>

but this does not seem to work the images are placed side by side rather than one on top of the other...

[jonnyynnoj]

To make an image appear underneath, put this into the style:


z-index: -1;

[rizlaa]

have tried putting z-index: -1 into the divs and the images but this still does not work.
can anyone provide the bit of code that will get this to work???

[jonnyynnoj]

<div height="24" style="position:relative; top: 0; left: 0;">
<img hspace="0" align="left" width="18" height="24" src="img1.gif">
</div>

<div height="24" style="position:absolute; top: -4; left: 0;">
<img hspace="0" align="left" width="18" height="24" src="img2.gif">
</div>

Works well for me. Just make sure the bottom image is bigger than the top image.

[rizlaa]

is there anyway of getting one image to sit on top of the other without having to artificially increase the size of the bottom image??

i need both images to be the same size. In my webpage they will be sitting within a td hence the reason for an absolute div within a relative div. so that the top and left co-ordinates of the absolute div refer to the td and not the page. The td has a fixed size of 18 x 24.

any more suggestions most welcome...

[rizlaa]

got it...



<div height="24" style="position:relative; top: 0; left: 0;"><img style="position:absolute; top:0; left:0;" hspace="0" align="left" width="18" height="24" src="img1.gif">
<img style="position:absolute; top:0; left:0" hspace="0" align="left" width="18" height="24" src="img2.gif"></div>