Welcome to WebmasterWorld Guest from 54.146.174.220

Forum Moderators: not2easy

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)

10+ Year Member



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)

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



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

10+ Year Member



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

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



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)

10+ Year Member



<td> does support backgrounds.

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

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

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



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)

WebmasterWorld Senior Member 10+ Year Member



<td> does support backgrounds

only in the transitional HTML versions.

Andreas

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

10+ Year Member



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)

10+ Year Member



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)

10+ Year Member



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)

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



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

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



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)

10+ Year Member



Tedster

inline style it is! it is now working properly.

thanks

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

10+ Year Member



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)

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




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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month