CSS property: background

Description

The background property is a shorthand property for setting most background properties.

The background property is a shorthand property for setting most background properties at the same place in the style sheet. Given a valid declaration, the shorthand first sets each of background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment and background-image to its initial value, then assigns explicit values given in the declaration.

If background-origin is present and its value matches a possible value for background-clip then it also sets background-clip to that value. For example, background: border-box sets both background-origin and background-clip to border-box.

CSS 3

Note that a color is permitted in <final-layer>, but not in <layer>.

The background property is a shorthand property for setting most background properties at the same place in the style sheet. The number of comma-separated items defines the number of background layers. Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of background-position, background-size, background-repeat, background-origin, background-clip and background-attachment to that property's initial value, then assigns any explicit values specified for this layer in the declaration. Finally background-color is set to the specified color, if any, else set to its initial value.

If one <box> value is present then it sets both background-origin and background-clip to that value. If two values are present, then the first sets background-origin and the second background-clip.

Syntax

CSS 2

background: <color> || <image> || <repeat> || <attachment> || <position>;

CSS 3

background: [ <layer>, ]* <final-layer>;

CSS 3

<layer> = <image> || <position> [ / <size> ]? || <repeat> || <attachment> || <box>{1,2};

CSS 3

<final-layer> = <image> || <position> [ / <size> ]? || <repeat> || <attachment> || <box>{1,2} || <color>;

Values

<color>

This property sets the background color of an element, either a <color> value or the keyword transparent, to make the underlying colors shine through.

<color>
transparent (by default)
<image>

This property sets the background image of an element. 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. (Thus, the color is visible in the transparent parts of the image).

<uri>
none (by default)
<repeat>

If a background image is specified, this property specifies whether the image is repeated (tiled), and how.

repeat (by default)The image is repeated both horizontally and vertically.
repeat-xThe image is repeated horizontally only.
repeat-yThe image is repeated vertically only.
no-repeatThe image is not repeated: only one copy of the image is drawn.
<attachment>

If a background image is specified, this property specifies whether it is fixed with regard to the viewport (fixed) or scrolls along with the containing block (scroll).

scroll (by default)
fixed
<position>

See background-position.

Versions