Forum Moderators: not2easy

Message Too Old, No Replies

td background picture in CSS

Ho do i set the background picture of a td in CSS?

         

Scrimbler

3:01 am on Dec 8, 2004 (gmt 0)

10+ Year Member



Im doing a project and i have to validate my XHTML page through..

[validator.w3.org...]

anyway, when i want to set background of a table cell to a particular image. normally when coding HTML, i would do (i've put decimals in to stop this thread from messing up in case it lets you use HTML):

-----------------------------------------------------
<td background="image.jpg">
-----------------------------------------------------

unfortunately the validator i use doesn't like it and i get this error message...

----------------------------------------------------------------------------------------------------------
Line 35, column 51: there is no attribute "background"

<td align="center" background="images\menubackground.jpg">

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.
----------------------------------------------------------------------------------------------------------

how can i overcome this using CSS? remember i only want to do this for once table cell (td). Please also note I am a complete novice at CSS and only have a basic understanding of it.

Many thanks for your time,

Scrimbler

kk5st

5:13 am on Dec 8, 2004 (gmt 0)

10+ Year Member



You may apply style properties;

<td style="background-image: url(some.png);">bla </td>

cheers,

gary

le_gber

9:31 am on Dec 8, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



you could also try in your stylesheet

td.mybackground{
background-image: url(images/menubackground.jpg); /* forward slash for the path */
width: 132px; /* use you own image size; */
height: 125px; /* use you own image size; */
background-repeat: no-repeat;
background-position: left top;
text-align: center;
vertical-align: top;
}

and then on your td

<td class="mybackground">your text</td>

if it's only once per page that you're using this you can use:

td#mybackground{
background-image: url(images/]menubackground.jpg);
width: 132px; /* use you own image size; */
height: 125px; /* use you own image size; */
background-repeat: no-repeat;
background-position: left top;
text-align: center;
vertical-align: top;
}

and then on your td

<td id="mybackground">your text</td>

leo

Bonusbana

12:16 pm on Dec 8, 2004 (gmt 0)

10+ Year Member



why make it complicated?

td.bg{
background: url(background.gif);
}

<td class="bg">your text</td>

Scrimbler

1:15 pm on Dec 8, 2004 (gmt 0)

10+ Year Member



thankyou very much for your replys! I appreciate your patience with a beginner like myself!

-Scrimbler