Welcome to WebmasterWorld Guest from 107.20.54.98

Forum Moderators: not2easy

Message Too Old, No Replies

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

applying background-image using css styles

     
3:57 pm on Oct 8, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 23, 2002
posts:56
votes: 0


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">

4:04 pm on Oct 8, 2002 (gmt 0)

Moderator from US 

WebmasterWorld Administrator martinibuster is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 13, 2002
posts:13973
votes: 123


Hey Nick_W,
Where are you!?
4:05 pm on Oct 8, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 23, 2002
posts:56
votes: 0


Is Nick_w the guru of css?
4:28 pm on Oct 8, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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?

5:06 pm on Oct 8, 2002 (gmt 0)

Full Member

10+ Year Member

joined:July 1, 2002
posts:230
votes: 0


<td> does support backgrounds.

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

5:49 pm on Oct 8, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


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 ;)

6:05 pm on Oct 8, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 22, 2002
posts:1782
votes: 0


<td> does support backgrounds

only in the transitional HTML versions.

Andreas

10:24 pm on Oct 8, 2002 (gmt 0)

Full Member

10+ Year Member

joined:May 9, 2002
posts:241
votes: 0


have you tried to put a div (set to width/height auto) inside the table (td) then let the div handle the background?
8:07 am on Oct 9, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 23, 2002
posts:56
votes: 0


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?

8:21 am on Oct 9, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:May 15, 2001
posts:462
votes: 0


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

8:30 am on Oct 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


<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)">

8:32 am on Oct 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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

url(image.gif)

8:38 am on Oct 9, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 23, 2002
posts:56
votes: 0


Tedster

inline style it is! it is now working properly.

thanks

10:51 am on Oct 9, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 23, 2002
posts:56
votes: 0


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?

12:55 pm on Oct 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0



'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>