homepage Welcome to WebmasterWorld Guest from 54.197.183.230
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

10+ Year Member



 
Msg#: 340 posted 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

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



 
Msg#: 340 posted 4:04 pm on Oct 8, 2002 (gmt 0)

Hey Nick_W,
Where are you!?

james gulliver

10+ Year Member



 
Msg#: 340 posted 4:05 pm on Oct 8, 2002 (gmt 0)

Is Nick_w the guru of css?

tedster

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



 
Msg#: 340 posted 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

10+ Year Member



 
Msg#: 340 posted 5:06 pm on Oct 8, 2002 (gmt 0)

<td> does support backgrounds.

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

SuzyUK

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



 
Msg#: 340 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 340 posted 6:05 pm on Oct 8, 2002 (gmt 0)

<td> does support backgrounds

only in the transitional HTML versions.

Andreas

copongcopong

10+ Year Member



 
Msg#: 340 posted 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

10+ Year Member



 
Msg#: 340 posted 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

10+ Year Member



 
Msg#: 340 posted 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

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



 
Msg#: 340 posted 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

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



 
Msg#: 340 posted 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

10+ Year Member



 
Msg#: 340 posted 8:38 am on Oct 9, 2002 (gmt 0)

Tedster

inline style it is! it is now working properly.

thanks

james gulliver

10+ Year Member



 
Msg#: 340 posted 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

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



 
Msg#: 340 posted 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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved