homepage Welcome to WebmasterWorld Guest from 107.21.163.227
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS background-image won't work for a table cell
applying background-image using css styles
james gulliver




msg:1197930
 3:57 pm on Oct 8, 2002 (gmt 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">

 

martinibuster




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

Hey Nick_W,
Where are you!?

james gulliver




msg:1197932
 4:05 pm on Oct 8, 2002 (gmt 0)

Is Nick_w the guru of css?

tedster




msg:1197933
 4:28 pm on Oct 8, 2002 (gmt 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?

Weblamer




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

<td> does support backgrounds.

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

SuzyUK




msg:1197935
 5:49 pm on Oct 8, 2002 (gmt 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 ;)

andreasfriedrich




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

<td> does support backgrounds

only in the transitional HTML versions.

Andreas

copongcopong




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

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




msg:1197938
 8:07 am on Oct 9, 2002 (gmt 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?

Robber




msg:1197939
 8:21 am on Oct 9, 2002 (gmt 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

tedster




msg:1197940
 8:30 am on Oct 9, 2002 (gmt 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)">

tedster




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

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

url(image.gif)

james gulliver




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

Tedster

inline style it is! it is now working properly.

thanks

james gulliver




msg:1197943
 10:51 am on Oct 9, 2002 (gmt 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?

tedster




msg:1197944
 12:55 pm on Oct 9, 2002 (gmt 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved