Jump to content

Display table background image on top of image in table data

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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...