Image behind a table with text

[pelachrum]

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?

thanks

[limbo]

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

CSS:

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

HTML:

<table>
<tr>
<td>data</td>
</tr>
<table>

[pelachrum]

how does this method hold up in different browsers?

do you konw if Mac systems display it correctly?

[limbo]

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

[Matt Probert]

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.

Matt

[limbo]

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:

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

HTML:
<div id="photo">
<table><tr>
<tdr>content</td></tr></table>
</div>

Or

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

[Lynque]

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.

[pixelkat]

greetings,all!
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.

kat