Display table background image on top of image in table data

[sheproc]

i have a simple table data cell <td> and i have 2 same-sized images i need to put in there, the first image is the <td> background image (which is a transparent png that has a grunge border) and the second image is just a regular JPG. Whenever i just add the <td background="images/bg.png> background PNG image and add the JPG image inside of the <td></td>, you cannot see the background PNG. I need to make the background PNG float over the top of the JPG image. I have tried playing around with z-index and css styles, etc but i cannot seem to make it work. Any help would be appreciated. I have attached 3 images, the brush-bg.png background image, the JPG image, and lastly a JPG of what i want it to look likeRegards,James

Edited July 31, 2012 by sheproc

[dsonesuk]

png image shows grunge effect border and uses tranparency to show any image or other content BEHIND it, showing jpg image which does not use transparency but always a compete filled image of some colour, will overlap totally when placed over any other image or content. So make sure jpg is background, and png foreground, OR don't use background image for td, but use png as img element but give it position: absolute; set width: height: left:0; top:0; z-index: 10; and give jpg image position: relative; z-index: 5; you may have to give td cell a position: relative also.

[sheproc]

thank you dsonesuk for your invaluable information. i used your second idea and it worked like a charm. i only needed to specify the png img element properties as suggested above. thus my <td></td> looked like this:<td><img src="images/brush-bg.png" height="497" width="459" style="position:absolute; z-index:10; left:0; top:0;" /><img src="images/image1-large.jpg" width="459" height="497" alt="image" /></td>.Thank youRegards,James

[dsonesuk]

I suggest you look at this through different browsers to make sure, you may have to set at least position: relative; for jpg to work in all especially IE and its older versions.