sheproc Posted July 31, 2012 Share Posted July 31, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted July 31, 2012 Share Posted July 31, 2012 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. 1 Link to comment Share on other sites More sharing options...
sheproc Posted July 31, 2012 Author Share Posted July 31, 2012 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 More sharing options...
dsonesuk Posted July 31, 2012 Share Posted July 31, 2012 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now