Background and Color Properties

You can also use CSS to specify backgrounds, images, and colors. What follows is a synopsis of these properties.

background

CSS1 values: [< background-color ><background-image>< background-repeat >< background-attachment ><background-position>]
CSS2 values: inherit
Default value: Not defined
Element support: All elements
Browser support: [IE3, IE4, IE5, IE6, NS4, NS6]
Style inherited: No

This shorthand property lets you list the background properties (such as background-color , background-image , background-repeat , background-attachment , and background-position ) all at the same time. Of course, you can set these properties individually as well.

background-attachment

CSS1 values: scrollfixed
CSS2 values: inherit
Default value: scroll
Element support: All elements
Browser support: [IE4, IE5, IE6]
Style inherited: No

This property indicates whether a background image is fixed or moves when as user scrolls the rest of the document. You can create some interesting effects by letting text "float" over a background this way.

background-color

CSS1 values: <color>transparent
CSS2 values: inherit
Default value: transparent
Element support: All elements
Browser support: [IE4, IE5, IE6, NS4, NS6]
Style inherited: No

This property indicates the background color of an element. You set it to either a <color> value or the keyword transparent . The transparent setting makes the underlying color visible.

background-image

CSS1 values: <uri>none
CSS2 values: inherit
Default value: None
Element support: All elements
Browser support: [IE4, IE5, IE6, NS4, NS6]
Style inherited: No

This property sets an element's background image. One thing to keep in mind is that, when setting a background image, you might also want to set a background color in case the image is unavailable.

background-position

CSS1 values: [[<percentage><length>]{1,2} [[topcenterbottom] [leftcenterright]]]
CSS2 values: inherit
Default value: 0% 0%
Element support: Block-level and replaced elements
Browser support: [IE4, IE5, IE6]
Style inherited: No

You set this property to indicate a background image's starting position. For example, setting this property to 50% 50% starts it at the middle of the page.

background-repeat

CSS1 values: repeatrepeat-xrepeat-yno-repeat
CSS2 values: inherit
Default value: repeat
Element support: All elements
Browser support: [IE4, IE5, IE6]
Style inherited: No

You use this property to specify whether a background image is repeatedcalled "tiling" the backgroundand, if so, how it is to be repeated.

color

CSS1 values: <color>
CSS2 values: inherit
Default value: Browser dependent
Element support: All elements
Browser support: [IE3, IE4, IE5, IE6, NS4, NS6]
Style inherited: Yes

This property sets a foreground (text) color. You set it to a color value.