How to show image on an image?

HTML & CSS
1

Hello,

I have this following code:

<table border="0" width="208" cellspacing="0" cellpadding="0" background="fridge_large.jpg" height="400">
<tr>
        <td height="2"></td>
</tr>
<tr>
        <td align="right"><img border="0" src="otherimg.jpg" width="204" height="378" alt="Large Fridge"></td>
</tr>
<tr>
        <td height="20"></td>
</tr>
</table>

Now in the middle cell there’s a image showing. I want to put another image on top of it which is of 31px wide and should be 100% height of the cell. How to do it ?

Thanks.

2

Well that depends :). Why can’t you just place an <img> in there side by side? You could place a background-image on the <td> but it would be unlikely to have 100% height all the time. An <img> would be best, though for it to be 100% height of the <td> at all times the image may scale some and not look all that well :).

3

I don’t want images to show side by side. I want to show 2nd image on top of 1st image. Also the 1st image is covering all of the td cell. And incase i put 1st image as td background then if the image is bigger than the size required then its not resizing and in background it gets cut off from the right coz table / cell is of fixed length.

I tired to place a <div> it is working but if the table moves here and there then div does’nt. How to stick the <div> in the cell ?

Thanks.

4

Show us a link :). I think if I can see waht you are saying I can help more :). I understand what you want with the image but you have it working with the <div> :). We should be able to make it work if the table moves.

5

Here’s the code with div. It works but if i just change table’s alignment to center then table gets in center whereas the div stays where it is.

http://www.fridgepic.com/test/

Thanks.

6

Ignoring that you don’t have a doctype/html/head/body tags in there, the problem is is that you absolutely positionied it, and it will stay in that spot since you gave coordinates.

You need to set a containing block, which you will need an extra <div> (you can’t place it on the <td> since it doesn’t work all that well).

Then, even if you give margin:auto (to center it) it will still go with it :slight_smile:

<table [B]style="margin:auto;"[/B] border="0" width="208" cellspacing="0" cellpadding="0" height="400" background="fridge_large.jpg">
<tr>
        <td height="2"></td>
</tr>
<tr>
        <td align="right">
[B]<div style="position:relative;">[/B]<img border="0" src="cat_l.jpg" width="204" height="378" alt="Large Fridge"><div style="position: absolute; width: 31px; height: 100&#37;; left:85px; top:10px" id="layer1"><img src="handles1.jpg" width="31" height="378" /></div>[B]</div>[/B]</td>
</tr>
<tr>
        <td height="20"></td>
</tr>
</table>

The inline style there for example ONLY :slight_smile:

7

Wow. Thanks it works! :slight_smile:

8

You’re welcome :).