background repeat

[meanweaver]

I have a table with the 3cols 3rows layout, I need an image in each corner and a backround that matches up with these in the outer cells, now all images are the same height, my problem is the background that runs along the top of the table is starting to repeat, the cell is set at the same height as the image, i have found out that if i insert the same image into this cell as a pictue then the background stops repeating, however i rather get round this another way, first off why does the image repeat, anyone have any ideas. I cant work this one out, below is my code.

<table width="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20" height="13" align="right" valign="bottom" background="images/tlcorner.gif">&nbsp;</td>
<td height="1" background="images/topmain.gif"></td>
<td width="20" height"13" align="left" valign="bottom" background="images/trcorner.gif">&nbsp;</td>
</tr>
<tr>
<td align="left" background="images/leftedge.gif">&nbsp;</td>
<td background="images/tablebg.jpg"><p>content content content</p>
<p>&nbsp; </p>
</td>
<td align="left" background="images/rightedge.gif">&nbsp;</td>
</tr>
<tr>
<td width="20" height="19" align="right" valign="top" background="images/blcorner.gif">&nbsp;</td>
<td valign="top" background="images/bottommain.gif" >&nbsp;</td>
<td align="left" valign="top" background="images/brcorner.gif">&nbsp;</td>
</tr>
</table>

Regards

[iamlost]

You are using deprecated HTML attributes. Most browsers interpret HTML "background" as requiring tiling the image.

I recommend that you investigate CSS: check out the CSS forum [webmasterworld.com] here on WebmasterWorld. and the w3c [w3.org] for information on the standards and best practices.

The quick solution is to add:
style="background-repeat: no-repeat;" to your code where required.

[meanweaver]

well have used the inline css and set it to repeat x, the part i dont understand now is instead of seeing about 3px of another tiled image i have white space, i have even set the height of the top center cell to 1px high but it will not collapse to this, i have no images in the corner cells holding it open either, all images in the table are set as background images, can anyone explain what is keeping these cells this height.
Regards.
Thanks for advice so far.

[iamlost]

Depending on your OS/version, your browser/version, your DocType version presence/absence the way HTML tag attributes are displayed can be interesting.

Try placing all the background attributes references in the style declaration i.e.:

style="background: #ff0 url(images/your.gif) repeat-x;"

This may make a difference in the display. Note I added a default background colour (pick your own) - this is a good way to see if the browser is displaying background-color different to background-image (it is also a good idea to have a complementary colour for those who surf with graphics turned off or if they don't load for some reason).