Jump to content

Display table background image on top of image in table data


sheproc
 Share

Recommended Posts

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 imagepost-98347-0-28539400-1343721116_thumb.png, the JPG imagepost-98347-0-38222800-1343721121_thumb.jpg, and lastly a JPG of what i want it to look likepost-98347-0-17136900-1343721367_thumb.jpgRegards,James

Edited by sheproc
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...