Using a Background Image in a Table

[awasson]

I picked up this tip from the good folks at www.sitepoint.com.

I often have the need to place an image in the background of a table for a form, or some sort of fancy background effect to set of the text or sometimes... Placing a JPG behind a transparent gif for really cool effects.

The problem with this is Netscape, the scourge of all Web Builders. Netscape will tile an image placed in a table background unless the table has only one cell. There are a few work arounds, but this is probably the most straight forward.

If you add background="image.jpg" to your <table> or <td> tag, Netscape 4 may do some wacky things. It will make that image the background of every cell, instead of placing it behind the entire table. It will even place the image into any child tables. To make the image display behind the entire table, you first need to place the image in a parent table, and then add background="" to the inside table.

<table background="image.jpg">
<tr><td>
<table background="">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr></table></td></tr></table>

Experiment a bit, the background="" works wonders!

[no_mac_jack]

Tricky! I actually just finished something where that would have saved some real headaches. Thanks! :woohoo:

~no_mac_jack

[awasson]

Yup I wish I knew that one a year ago

[MandyJay]

Hi,
Just wanted to add to that (BTW great tip, Andrew ..... have used it a lot) ..... if using that code in Front Page, you will have to go into HTML view to add the

background=""

to the table tag

Depending on your page option settings, FP can change that code when you save the page. If still in HTML view, you save the page, the code is still there ... once you go back into normal view ... then back into HTML .... the code has gone. For example I had this as my code

<table background="" border="0" cellpadding="0" cellspacing="0" width="750">

and FP changed it to:

<table background border="0" cellpadding="0" cellspacing="0" width="750">

The way around this, is in Page Options (tools/page options) - check the box that says "when saving files ...... preserve existing html" - then Front Page will leave that code alone and not try and alter it.

I had forgotten about that, and spent ages trying to get FP to accept that code.

:furball:
MJ

[awasson]

Oh good one!

That's a good tip in itself.

Thanks MJ