homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

Image behind a table with text

 7:53 am on Nov 19, 2005 (gmt 0)

suppose i want to have an image in the background (but not as <bgimage> since I don't think it's a flexible solution) more like subtle graphics behind a table with text, what's the best way of doing it, with layers? image on one layer and table on a layer on top of it?




 6:18 pm on Nov 19, 2005 (gmt 0)

Using a CSS background property would do the trick...


td { background: url(yourimage.gif); }




 4:55 am on Nov 20, 2005 (gmt 0)

how does this method hold up in different browsers?

do you konw if Mac systems display it correctly?


 11:42 am on Nov 20, 2005 (gmt 0)

I've never hasd any problem with the background: selector. Works fine on mac - safari, camino etc.

Matt Probert

 11:45 am on Nov 20, 2005 (gmt 0)

That method does only place an image behing a single table cell (td for example).

You may then need to place a second table nested within that element if you require rows and columns in front of the image.



 1:37 pm on Nov 20, 2005 (gmt 0)

Matt, nesting tables is one method, but not very good practice. Placing the table in a div or a class to the table tag might be a better solution:

#photo { background:url(yourimage.jpg); }

<div id="photo">


<table id="photo"><tr>
<tdr>content</td></tr></table> - where the image is placed behind the whole table not individual cells


 4:42 am on Nov 23, 2005 (gmt 0)

Not sure what you are trying to achieve here but if you are looking to have different img's in the "background" of different cells in the table then you should give each cell an "ID" and use the DOM to define the placement if the img.

If it is DOM driven then you can even go as far as to place form elements overtop of the "background" graphic.


 7:47 am on Nov 23, 2005 (gmt 0)

while I will agree that the DOM model is a beautiful thing, the css <div> container is already an object in its simplest form. standards-compliant browsers like Firefox, mozilla, opera, safari...in other words, all known browsers EXCEPT IE, all that's needed is a div containing your bg image asits background (using the css background selector) defined by an id if it's unique or a class if the are several, nesting the table inside the div. you could also use of x-index to make sure the div container remained behind everything else.
alas, the web's most popular browser mishandles the z-index stacking or randomly ignores stacking order altogether. I've also noticed tables nested in divs sometimes adds extra vertical spacing above and below the surrounding div that is difficult to adjust. it can also cause a 1 or two pixel horizontal shift in the table positioning.

until IE stops lagging behind in full css 2 support and learns to play by the rules instead of making up its own rules, the DOM model is the best way to make IE play nice with all the other little browsers.
I wish Microsoft would get out of the desktop browser market altogether and go blaze new trails. that's what they're good at.
hope this info is helpful.


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved