Contents
CSS properties allow authors to specify the foreground color and background of an element. Backgrounds may be colors or images. Background properties allow authors to position the image, repeat it, and declare whether it should be fixed with respect to the viewport or scrolled along with the document.
See the section on color units for the syntax of legal color values.
| Property name: | 'color' |
|---|---|
| Value: | <color> | inherit |
| Initial: | depends on user agent |
| Applies to: | all elements |
| Inherited: | yes |
| Percentage values: | N/A |
| Media groups: | visual |
This property describes the foreground color of an element's text content. There are different ways to specify red:
EM { color: red } /* predefined color name */
EM { color: rgb(255,0,0) } /* RGB range 0-255 */
Authors may specify the background of an element (i.e., its rendering surface) as either a color or an image. In terms of the box model, "background" refers to the background of the content and the padding area. Border colors and styles are set with the border properties. Margins are always transparent so the background of the parent box always shines through.
Background properties do not inherit, but the parent box's background will shine through by default because of the initial 'transparent' value on 'background-color'.
The background of the box generated by the root element covers the entire canvas.
For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. User agents should observe the following precedence rules to fill in the background: if the value of the 'background' property for the HTML element is different from 'transparent' then use it, else use the value of the 'background' property for the BODY element. If the resulting value is 'transparent', the rendering is undefined.
According to these rules, the canvas underlying the following HTML document will have a "marble" background and the background of the box generated by the BODY element will be red:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
{ background: url(http://style.com/marble.png) }
</STYLE>
<TITLE>Setting the canvas background</TITLE>
</HEAD>
<BODY style="background: red">
<P>My background is red.
</BODY>
</HTML>
Note. The document language may not define an element that gives direct access to the canvas.
| Property name: | 'background-color' |
|---|---|
| Value: | <color> | transparent | inherit |
| Initial: | transparent |
| Applies to: | all elements |
| Inherited: | no |
| Percentage values: | N/A |
| Media groups: | visual |
This property sets the background color of an element. Values have the following meanings:
H1 { background-color: #F00 }
| Property name: | 'background-image' |
|---|---|
| Value: | <uri> | none | inherit |
| Initial: | none |
| Applies to: | all elements |
| Inherited: | no |
| Percentage values: | N/A |
| Media groups: | visual |
This property sets the background image of an element to be an image. When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color.
Values have the following meanings:
BODY { background-image: url(marble.gif) }
P { background-image: none }
| Property name: | 'background-repeat' |
|---|---|
| Value: | repeat | repeat-x | repeat-y | no-repeat | inherit |
| Initial: | repeat |
| Applies to: | all elements |
| Inherited: | no |
| Percentage values: | N/A |
| Media groups: | visual |
If a background image is specified, this property specifies whether the image is repeated, and how. Values have the following meanings:
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
In the example above, the image will only be repeated vertically.
| Property name: | 'background-attachment' |
|---|---|
| Value: | scroll | fixed | inherit |
| Initial: | scroll |
| Applies to: | all elements |
| Inherited: | no |
| Percentage values: | N/A |
| Media groups: | visual |
If a background image is specified, this property specifies whether it is fixed with regard to the viewport or scrolls along with the document. Values have the following meanings:
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
User agents may treat 'fixed' as 'scroll'. However, it is recommended they interpret 'fixed' correctly, at least for the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'. See the section on conformance for details.
| Property name: | 'background-position' |
|---|---|
| Value: | [ [<percentage> | <length> ]{1,2} | [top | center | bottom] || [left | center | right] ] | inherit |
| Initial: | 0% 0% |
| Applies to: | block-level and replaced elements |
| Inherited: | no |
| Percentage values: | refer to the size of the element itself |
| Media groups: | visual |
If a background image has been specified, this property specifies its initial position. Values have the following meanings:
If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed, (e.g., '50% 2cm'). Negative positions are allowed. Keywords cannot be combined with percentage values or length values (all possible combinations are given above).
Examples:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
If the background image is fixed within the viewport (see the property), the image is placed relative to the viewport instead of the element's box. For example,
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
In the example above, the image is placed in the lower-right corner of the viewport.
| Property name: | 'background' |
|---|---|
| Value: | [<'background-color'> || <'background-image'> || <'background-repeat'> || || <'background-position'>] | inherit |
| Initial: | not defined for shorthand properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentage values: | allowed on 'background-position' |
| Media groups: | visual |
The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', and 'background-position') at the same place in the style sheet.
The 'background' property always sets all the individual background properties. The 'background' property helps authors remember to specify all aspects of a background which they might otherwise neglect by using the individual background properties.
In the first rule of the following example, only a value for 'background-color' has been given and the other individual properties are set to their initial value. In the second rule, all individual properties have been specified.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }