dibigid Posted March 25, 2011 Share Posted March 25, 2011 Hi all, I'm trying to get an image to be used as a background in one of my table cells (you know, a nice rounded edge rectangle to make the text look nice) but I'm having a lot of problems.When I set the z-index to -1, from what I've read that should send the image behind everything else in the cell, but it doesn't unless I add the position:absolute feature. And I'm also trying to set the width property of the image so that it fills the entire width of the cell and then scales as the visitor resizes their browser.In Chrome the image appears to work fine with the properties z-index: -1, width: 100%, position:absolute, but in any other browser (Firefox, IE) the image doesn't load correctly. It will not be in the right place, will extend off the right of the webpage too far, or will not z-index properly and be above all the text.Any help? How can I just get the image to sit nicely in its cell in the background without causing any problems? Link to comment Share on other sites More sharing options...
ShadowMage Posted March 25, 2011 Share Posted March 25, 2011 z-index has no effect on elements that are not positioned. (ie, they must have position set to absolute, relative, or fixed)Maybe try using relative instead of absolute?EDIT:Actually, try giving the cell relative positioning and give the image absolute. Then set the images top and left properties to 0. Link to comment Share on other sites More sharing options...
dibigid Posted March 25, 2011 Author Share Posted March 25, 2011 Okay,With the cell's position set to relative and the image's position set to absolute, with a z-index of -1, the image displays properly as a background in IE but not in Chrome or Firefox.In both Chrome and Firefox the image now is displayed behind the whole webpage, not just the cell it's supposed to be in. I have the top and left properties set to 0, and have tried messing around with changing the position elements of the cell and image, but no combination yields success in all browsers. :)Thanks for the reply, btw! Link to comment Share on other sites More sharing options...
ShadowMage Posted March 25, 2011 Share Posted March 25, 2011 Post your relevant HTML and CSS.The img should be inside the cell, as in:<td><img ... /></td>z-index is a funny thing. It can be very tricky.... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.