Summary
The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.
The background CSS shorthand property assigns explicit given values and sets missing properties to their initial values.
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | no |
| Percentages | as each of the properties of the shorthand:
|
| Media | visual |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
| Canonical order | order of appearance in the formal grammar of the values |
Syntax
/* Using a <background-color> */
background: green;
/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;
/* Using a <box> and <background-color> */
background: border-box red;
/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");
background-color can only be defined on the last background, as there is only one background color for the whole element.Values
One or more of the following, in any order:
<attachment>- See
background-attachment <box>- See
background-clip <background-color>- See
background-color <bg-image>- See
background-image <position>- See
background-position <repeat-style>- See
background-repeat <bg-size>- See
background-size. This property must be specified after <position>, separated with the '/' character.
Formal syntax
[ <bg-layer> , ]* <final-bg-layer>where
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>where
<bg-image> = none | <image>
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<attachment> = scroll | fixed | local
<box> = border-box | padding-box | content-boxwhere
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>where
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> <length-percentage>?
Examples
HTML
<p class="topbanner"> Starry sky<br/> Twinkle twinkle<br/> Starry sky </p> <p class="warning">Here is a paragraph<p>
CSS
.warning {
background: red;
}
.topbanner {
background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
}
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 The definition of 'background' in that specification. |
Candidate Recommendation | The shorthand property has been extended to support multiple backgrounds and the new background-size, background-origin and background-clip properties. |
| CSS Level 2 (Revision 1) The definition of 'background' in that specification. |
Recommendation | No significant changes |
| CSS Level 1 The definition of 'background' in that specification. |
Recommendation | Initial definition |
Browser compatibility
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 (1.7 or earlier) | 1.0 | 4.0 | 3.5 | 1.0 |
| Multiple backgrounds | 3.6 (1.9.2) | 1.0 | 9.0 | 10.5 | 1.3 |
| SVG image as background | 4.0 (2.0) | 31.0 | 9.0 | 21.0 | 5.1 |
Support for background-size |
18.0 (18.0) | 21.0 | 9.0 | 21.0 | 6.1 |
Support for background-origin and background-clip |
22.0 (22.0) | 31.0 | 9.0 | 21.0 | 5.1 |
| Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 1.0 (1.9.2) | 2.1 | 10.0 | 5.0 | 3.2 |
| Multiple backgrounds | 1.0 (1.9.2) | 2.1 | 10.0 | 5.0 | 3.2 |
| SVG image as background | 4.0 (2.0) | 3.0 | 10.0 | ? | 4.2 |
Support for background-size |
18.0 (18.0) | 3.0 | 10.0 | (Yes) | 4.0 |
Support for background-origin and background-clip |
22.0 (22.0) | 3.0 | 10.0 | No support | 4.0 |
