Contents
CSS properties allow authors to specify the foreground color andbackground of an element. Backgrounds may be colors orimages. Background properties allow authors to position a background image,repeat it, and declare whether it should be fixed with respectto theviewport or scrolledalong with the document.
See the section oncolor unitsfor the syntax of valid color values.
This property describes the foreground color of an element's textcontent. There are different ways to specify red:
Example(s):
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., itsrendering surface) as either a color or an image. In terms of thebox model, "background" refers tothe background of thecontent,padding andborder areas. Border colorsand styles are set with theborder properties. Marginsare always transparent.
Background properties are not inherited, but the parent box'sbackground will shine through by default because of the initial'transparent' value on
The background of the root element becomes the background of the canvas andcovers the entirecanvas, anchored (for'background-position') atthe same point as it would be if it was painted only for the root elementitself. The root element does not paint this background again.
For HTML documents, however, we recommend that authors specify thebackground for the BODY element rather than the HTML element.For documents whose root element is an HTML "HTML" element or an XHTML"html" element that has computed values of 'transparent' for
According to these rules, the canvas underlying the following HTML document will have a "marble" background:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <TITLE>Setting the canvas background</TITLE> <STYLE type="text/css"> BODY { background: url("http://example.com/marble.png") } </STYLE> <P>My background is marble.Note that the rule for the BODY element will work even though the BODY tag has been omitted in the HTML source since the HTML parser will infer the missing tag.
Backgrounds of elements that form a stacking context (see the
| Value: | <color> | transparent |inherit |
| Initial: | transparent |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | as specified |
This property sets the background color of an element, either a
Example(s):
h1 { background-color: #F00 }| Value: | <uri> | none |inherit |
| Initial: | none |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | absolute URI or none |
This property sets the background image of an element. Whensetting a background image, authors should also specify a backgroundcolor that will be used when the image is unavailable. When the imageis available, it is rendered on top of the background color. (Thus,the color is visible in the transparent parts of the image).
Values for this property are either
Example(s):
body { background-image: url("marble.png") }p { background-image: none }Intrinsic dimensions expressed as percentages must be resolvedrelative to the dimensions of the rectangle that establishes thecoordinate system for the
If the image has one of either an intrinsic width or an intrinsicheight and an intrinsic aspect ratio, then the missing dimension iscalculated from the given dimension and the ratio.
If the image has one of either an intrinsic width or an intrinsicheight and no intrinsic aspect ratio, then the missing dimension isassumed to be the size of the rectangle that establishes thecoordinate system for the 'background-position' property.
If the image has no intrinsic dimensions and has an intrinsic ratiothe dimensions must be assumed to be the largest dimensions at thatratio such that neither dimension exceeds the dimensions of therectangle that establishes the coordinate system for the
If the image has no intrinsic ratio either, then the dimensionsmust be assumed to be the rectangle that establishes the coordinatesystem for the
| Value: | repeat | repeat-x | repeat-y | no-repeat |inherit |
| Initial: | repeat |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | as specified |
If a background image is specified, this property specifies whetherthe image is repeated (tiled), and how. All tiling covers thecontent,padding andborder areas of a box.
The tiling and positioning of the background-image on inline elements is undefined in this specification. A future level of CSS may define the tiling and positioning of the background-image on inline elements.
Values have the following meanings:
Example(s):
body { background: white url("pendant.png"); background-repeat: repeat-y; background-position: center;}One copy of the background image is centered, andother copies are put above and below it to make a vertical band behindthe element.
| Value: | scroll | fixed |inherit |
| Initial: | scroll |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | as specified |
If a background image is specified, this property specifieswhether it is fixed with regard to theviewport ('fixed') or scrolls alongwith the containing block ('scroll').
Note that there is only one viewport per view. If an element hasa scrolling mechanism (see 'overflow'), a 'fixed' background does notmove with the element, and a 'scroll' background does not move withthe scrolling mechanism.
Even if the image is fixed, it is still only visible when it is inthe content, padding or border area of the element. Thus, unlessthe image is tiled ('background-repeat: repeat'), it may be invisible.
In paged media, where there is no viewport, a 'fixed' background isfixed with respect to the page box and is therefore replicated onevery page.
Example(s):
This example creates an infinite vertical bandthat remains "glued" to the viewport when the element is scrolled.
body { background: red url("pendant.png"); background-repeat: repeat-y; background-attachment: fixed;}User agents that do not support 'fixed' backgrounds (for example dueto limitations of the hardware platform) should ignore declarationswith the keyword 'fixed'. For example:
body { background: white url(paper.png) scroll; /* for all UAs */ background: white url(ledger.png) fixed; /* for UAs that do fixed backgrounds */}See the section onconformance for details.
| Value: | [ [<percentage> |<length> | left | center | right ] [<percentage> |<length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] |inherit |
| Initial: | 0% 0% |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | refer to the size of the box itself |
| Media: | visual |
| Computed value: | for<length> the absolute value, otherwise a percentage |
If a background image has been specified, this property specifiesits initial position. If only one value is specified, the second valueis assumed to be 'center'. If at least one value is not a keyword,then the first value represents the horizontal position and the secondrepresents the vertical position. Negative <percentage> and<length> values are allowed.
However, the position is undefined in CSS 2.1 if the image hasan intrinsic ratio, but no intrinsic size.
Example(s):
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% */The tiling and positioning of the background-image on inline elements is undefined in this specification. A future level of CSS may define the tiling and positioning of the background-image on inline elements.
If the background image is fixed within the viewport (see the
Example(s):
body { background-image: url("logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat;}In the example above, the (single) image is placed in the lower-rightcorner of the viewport.
| Value: | [<'background-color'> ||<'background-image'> ||<'background-repeat'>||<'background-attachment'> ||<'background-position'>] |inherit |
| Initial: | see individual properties |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | allowed on 'background-position' |
| Media: | visual |
| Computed value: | see individual properties |
The'background' propertyis a shorthand property for setting the individual backgroundproperties (i.e.,
Given a valid declaration,the'background' propertyfirst sets all the individual background properties to their initialvalues, then assigns explicit values given in the declaration.
Example(s):
In the first rule of the following example, only a value for
BODY { background: red }P { background: url("chess.png") gray 50% repeat fixed }