CSS - background

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.

Examples

HTML

Copy Code

<p class="topbanner">
  Starry sky<br/>
  Twinkle twinkle<br/>
  Starry sky
</p>
<p class="warning">Here is a paragraph<p>

CSS

Copy Code

.warning { 
  background: red; 
}

.topbanner { 
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; 
}

Result

Syntax

CSS

Copy Code

/* 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");

Note: The 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

CSS

Copy Code

<a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/background#bg-layer"><bg-layer></a> , <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#asterisk_(*)" title="Asterisk">*</a> <a href="css/background#final-bg-layer"><final-bg-layer></a><p>where <br><code><bg-layer> = <a href="css/background#bg-image"><bg-image></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/position_value" title=""><position></a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> / <a href="css/background#bg-size"><bg-size></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/background#repeat-style"><repeat-style></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/background#attachment"><attachment></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/background#box"><box></a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>1,2<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a><br><final-bg-layer> = <a href="css/background#bg-image"><bg-image></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/position_value" title=""><position></a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> / <a href="css/background#bg-size"><bg-size></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/background#repeat-style"><repeat-style></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/background#attachment"><attachment></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/background#box"><box></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/background#box"><box></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/background-color" title="&lt;color&gt;"><'background-color'></a></code></p><p>where <br><code><bg-image> = none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/image" title=""><image></a><br><position> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a><a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/background#length-percentage"><length-percentage></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> && <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/background#length-percentage"><length-percentage></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#brackets" title="Brackets">]</a><br><bg-size> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/background#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> auto <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>1,2<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> cover <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> contain<br><repeat-style> = repeat-x <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> repeat-y <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> repeat <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> space <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> round <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> no-repeat <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>1,2<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a><br><attachment> = scroll <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> fixed <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> local<br><box> = border-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> padding-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> content-box<br></code></p><p>where <br><code><image> = <a href="css/url" title=""><url></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#image()"><image()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#image-set()"><image-set()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#element()"><element()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#cross-fade()"><cross-fade()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#gradient"><gradient></a><br><length-percentage> = <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a></code></p><p>where <br><code><image()> = image( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/image" title=""><image></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/string" title=""><string></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> , <a href="css/color_value" title=""><color></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a>! )<br><image-set()> = image-set( <a href="css/background#image-set-option"><image-set-option></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a> )<br><element()> = element( <id-selector> )<br><cross-fade()> = cross-fade( <a href="css/background#cf-mixing-image"><cf-mixing-image></a> , <a href="css/background#cf-final-image"><cf-final-image></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> )<br><gradient> = <a href="css/background#linear-gradient()"><linear-gradient()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#repeating-linear-gradient()"><repeating-linear-gradient()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#radial-gradient()"><radial-gradient()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#repeating-radial-gradient()"><repeating-radial-gradient()></a></code></p><p>where <br><code><color> = <a href="css/background#rgb()"><rgb()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#rgba()"><rgba()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#hsl()"><hsl()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#hsla()"><hsla()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <hex-color> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#named-color"><named-color></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> currentcolor <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#deprecated-system-color"><deprecated-system-color></a><br><image-set-option> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/image" title=""><image></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/string" title=""><string></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/resolution" title=""><resolution></a><br><cf-mixing-image> = <a href="css/percentage" title=""><percentage></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> && <a href="css/image" title=""><image></a><br><cf-final-image> = <a href="css/image" title=""><image></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/color_value" title=""><color></a><br><linear-gradient()> = linear-gradient( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/angle" title="Possible values: a number followed by'deg', 'grad', 'rad' or 'turn', like 2turn, 1.3rad, -60deg or 0grad."><angle></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> to <a href="css/background#side-or-corner"><side-or-corner></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> , <a href="css/background#color-stop-list"><color-stop-list></a> )<br><repeating-linear-gradient()> = repeating-linear-gradient( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/angle" title="Possible values: a number followed by'deg', 'grad', 'rad' or 'turn', like 2turn, 1.3rad, -60deg or 0grad."><angle></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> to <a href="css/background#side-or-corner"><side-or-corner></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> , <a href="css/background#color-stop-list"><color-stop-list></a> )<br><radial-gradient()> = radial-gradient( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/background#ending-shape"><ending-shape></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/background#size"><size></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> at <a href="css/position_value" title=""><position></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> , <a href="css/background#color-stop-list"><color-stop-list></a> )<br><repeating-radial-gradient()> = repeating-radial-gradient( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/background#ending-shape"><ending-shape></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/background#size"><size></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> at <a href="css/position_value" title=""><position></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> , <a href="css/background#color-stop-list"><color-stop-list></a> )</code></p><p>where <br><code><rgb()> = rgb( <a href="css/background#rgb-component"><rgb-component></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>3<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> )<br><rgba()> = rgba( <a href="css/background#rgb-component"><rgb-component></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>3<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> , <a href="css/background#alpha-value"><alpha-value></a> )<br><hsl()> = hsl( <a href="css/background#hue"><hue></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/percentage" title=""><percentage></a> )<br><hsla()> = hsla( <a href="css/background#hue"><hue></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/percentage" title=""><percentage></a>, <a href="css/background#alpha-value"><alpha-value></a> )<br><named-color> = <ident><br><deprecated-system-color> = ActiveBorder <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ActiveCaption <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> AppWorkspace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Background <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonFace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonHighlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ButtonText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> CaptionText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> GrayText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Highlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> HighlightText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveBorder <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveCaption <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InactiveCaptionText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InfoBackground <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> InfoText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Menu <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> MenuText <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Scrollbar <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDDarkShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDFace <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDHighlight <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDLightShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ThreeDShadow <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> Window <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> WindowFrame <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> WindowText<br><side-or-corner> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><br><color-stop-list> = <a href="css/background#color-stop"><color-stop></a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>2,}<br><ending-shape> = circle <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ellipse<br><size> = closest-side <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> farthest-side <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> closest-corner <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> farthest-corner <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/background#length-percentage"><length-percentage></a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>2<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a><br></code></p><p>where <br><code><rgb-component> = <a href="css/integer" title=""><integer></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a><br><alpha-value> = <a href="css/number" title=""><number></a><br><hue> = <a href="css/number" title=""><number></a><br><color-stop> = <a href="css/color_value" title=""><color></a> <a href="css/background#length-percentage"><length-percentage></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a><br></code></p>

Description

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: `background-image`: `none` `background-position`: `0% 0%` `background-size`: `auto auto` `background-repeat`: `repeat` `background-origin`: `padding-box` `background-clip`: `border-box` `background-attachment`: `scroll` `background-color`: `transparent`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	no
Percentages	as each of the properties of the shorthand: `background-position`: refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets `background-size`: relative to the background positioning area
Media	visual
Computed value	as each of the properties of the shorthand: `background-image`: as specified, but with URIs made absolute `background-position`: a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a `<length>`), otherwise as a percentage `background-size`: as specified, but with relative lengths converted into absolute lengths `background-repeat`: a list, each item consisting of two keywords, one per dimension `background-origin`: as specified `background-clip`: as specified `background-attachment`: as specified `background-color`: If the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
Animation type	as each of the properties of the shorthand: `background-color`: a color `background-image`: discrete `background-clip`: discrete `background-position`: a repeatable list of , a simple list of , a length, percentage or calc(); `background-size`: a repeatable list of , a simple list of , a length, percentage or calc();, keywords `background-repeat`: discrete `background-attachment`: discrete
Canonical order	order of appearance in the formal grammar of the values

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

	Desktop Browsers					Mobile Browsers
	Chrome for Desktop	Firefox for Desktop	Internet Explorer for Desktop	Opera for Desktop	Safari for Desktop	Android Browser	Firefox for Android	Internet Explorer Mobile	Opera Mobile	Safari for iOS
Basic Support	1.0Full support	1.0Full support	4.0Full support	3.5Full support	1.0Full support	2.1Full support	1.0Full support	10.0Full support	5.0Full support	3.2Full support
Multiple backgrounds	1.0Full support	3.6Full support	9.0Full support	10.5Full support	1.3Full support	2.1Full support	1.0Full support	10.0Full support	5.0Full support	3.2Full support
SVG image as background	31.0Full support	4.0Full support	9.0Full support	21.0Full support	5.1Full support	3.0Full support	4.0Full support	10.0Full support	?	4.2Full support
Support for `background-size`	21.0Full support	18.0Full support	9.0Full support	21.0Full support	5.1Full support	3.0Full support	18.0Full support	10.0Full support	YesFull support	4.0Full support
Support for `background-origin` and `background-clip`	31.0Full support	22.0Full support	9.0Full support	21.0Full support	5.1Full support	3.0Full support	22.0Full support	10.0Full support	NoNo support	4.0Full support

Legend

Full support: Full support
No support: No support

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/background

CSS CSS Background CSS Property Reference

CSS - background

Examples

HTML

CSS

Result

Syntax

Values

Formal syntax

Description

Browser Compatibility

See Also

Specifications

License