CSS background-image won't work for a table cell

applying background-image using css styles

[james gulliver]

I have been trying to define the background image for a table using a simple stylesheet by defiining a particular table class as having a background image.. this is all great and works locally in dreamweaver but when i then upload it the background image is not visible.

The reason i want to do this is i am validating a page and the background image in the table is causing an error. I thought this was a simple way round it but it appears not?

If the first is not possible can somenone explain the error message below and what i have to do to remove this problem from my life?

ERRROR: there is no attribute "BACKGROUND"

CODE: <td height="329" background="images/bckground.gif" valign="top">

[martinibuster]

Hey Nick_W,
Where are you!?

[james gulliver]

Is Nick_w the guru of css?

[tedster]

Well, as you see, there is no background attribute for <td> And browser support for CSS background-image rules in tables can be very spotty.

Have you tried wrapping the table in a div and giving the div a background-image?

[Weblamer]

<td> does support backgrounds.

<td width="100%" background="pic.gif">&nbsp;</td>

[SuzyUK]

Just a guess here and not tested..

but if you wrap the table in a <div> then apply the background image (and any positioning) to the div, then ensure that your table background color is transparent

would that work?

Suzy

[edited] tested it now...and it does work
and sorry tedster I didn't see you had posted the same solution ;)

[andreasfriedrich]

<td> does support backgrounds

only in the transitional HTML versions.

Andreas

[copongcopong]

have you tried to put a div (set to width/height auto) inside the table (td) then let the div handle the background?

[james gulliver]

i have tried all these suggestions and they DON'T work what am i doing wrong?

i even made a new page and applied the div tag to a blank table but the background image still didnt work.

I am viewing the page in IE5.5

In my initial post i explained the reason for wanting to do this can anybody suggest how i can make the html validate without placing the background image in the css style sheet?

[Robber]

Sorry James,

No non-css solution for you, but if you do go with css this will work:

td.abc {
width: 140px;
background: url(images/xyz.gif);
background-repeat: repeat-y;
background-color: #ffffff;
}

Validated this with xhtml strict just yesterday.

Cheers

[tedster]

<td> does support backgrounds

Yes, but there's a difference between what some browsers will support and what's VALID mark-up. Even in HTML 3.2 a background atttribute is not valid for a table or table cell.

how i can make the html validate without placing the background image in the css style sheet

You can't. But you can try it as an inline style, rather than an external .css file.

Have you tried this:

<td height="329" style="background-image:url(images/bckground.gif)">

[tedster]

As an afterthought - are you remembering to put the path for the image INSIDE a "url()" like this?

url(image.gif)

[james gulliver]

Tedster

inline style it is! it is now working properly.

thanks

[james gulliver]

I have validated the page and css. will this make any difference to the pages rankings within the search engines?

one more thing. what is the syntax for norepeat on a background image using inline css?

[tedster]

'background-repeat' takes these values:
repeat ¦ repeat-x ¦ repeat-y ¦ no-repeat ¦ inherit

W3C reference [w3.org]

So that means:

<element style="background-image:url(image.gif);background-repeat:no-repeat;"></element>