Table background image tiling in Netscape - a quick solution - tiling image problem in Netscape - solving the problem of image tiling in Netscape
Table background image tiling in Netscape - a quick solution, tiling image problem in Netscape, solving the problem of image tiling in Netscape
Table background image tiling in Netscape - A quick solutionGo to Table background image tiling in Netscape - A quick solutionHTML & JavaScriptGo to HTML and JavaScript tips and tricksTips and tricksGo to web development Tips and tricksHomepage

Table background image tiling in Netscape - A quick solution

So you want to discipline Netscape and not let it tile your precious background table image?

For those who don't know what I'm talking about, here is the problem in detail.
Netscape tends to repeat the background image of a table in each table cell. This leads to tiling of the image (used as a background for a table) if the table contains 2 or more cells.

Here is the faulty table...(check out the great Merc!). If you are viewing this page under Internet Explorer, you won't find anything wrong with the table... how about checking it in Netscape?

Cell 1 Cell 2 Cell 3

And the code is:

<TABLE BACKGROUND="thee250.jpg" WIDTH="250" HEIGHT="150" 
BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP"><FONT COLOR="#FFFFFF"
><B>Cell 1</B><FONT></TD>
<TD ALIGN="CENTER" VALIGN="TOP"><FONT COLOR="#FFFFFF"
><B>Cell 2</B><FONT></TD>
<TD ALIGN="CENTER" VALIGN="TOP"><FONT COLOR="#FFFFFF"
><B>Cell 3</B><FONT></TD>
</TR>
</TABLE>

thee250.jpg is the picture of the Mercedes used as background image for the table.

You can go through the code again and again and yet again... but you can't find a fault with it. It is just Netscape's way of rendering the table. In I.E. the table is displayed perfectly.

Let's write the code that works for Netscape as well as for I.E.

<TABLE BACKGROUND="thee250.jpg" WIDTH="250" HEIGHT="150" 
BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD>
   <TABLE WIDTH="250" HEIGHT="150" BACKGROUND="some.gif">
   <TR>
   <TD ALIGN="CENTER" VALIGN="TOP"><FONT COLOR="#ffffff">
   Cell 1</FONT></TD>
   <TD ALIGN="CENTER" VALIGN="TOP"><FONT COLOR="#ffffff">
   Cell 2</FONT></TD>
   <TD ALIGN="CENTER" VALIGN="TOP"><FONT COLOR="#ffffff">
   Cell 3</FONT></TD>
   </TR>
   </TABLE>
</TD>
</TR>
</TABLE>

And here is how it's displayed

Cell 1 Cell 2 Cell 3

The Magic - Displaying the correct background image in Netscape

You'll notice that I have introduced another table inside the one that has the background Merc image. This table has a background image attribute too - the background image is 'some.gif'. However, some.gif does not exist. You can use any name here (as long as the image file doesn't exist). A more purist approach would be to use a 1X1 pixel transparent gif image to avoid any kind of complications.


AddThis Social Bookmark Button


Page contents: Netscape tiles background images placed in table cells. This article discusses a solution to this problem.

Page URL: http://www.webdevelopersnotes.com/tips/html/ table_background_image_tiling_in_netscape_a_quick_solution.php3



Join Mailing List


Feedback/Questions




50+ web hosting FAQs

Search engine for your website

Free software from Google - The Google Pack Collection

Create your own search engine
Search WebDevelopersNotes.com