Web/CSS/background

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Constituent properties

This property is a shorthand for the following CSS properties:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

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

The background property is specified as one or more background layers, separated by commas.

The syntax of each layer is as follows:

• Each layer may include zero or one occurrences of any of the following values:
  • <attachment>
  • <bg-image>
  • <position>
  • <bg-size>
  • <repeat-style>
• The <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%".
• The <box> value may be included zero, one, or two times. If included once, it sets both background-origin and background-clip. If it is included twice, the first occurrence sets background-origin, and the second sets background-clip.
• The <background-color> value may only be included in the last layer specified.

Values

<attachment>

See background-attachment

<box>

See background-clip and background-origin

<background-color>

See background-color

<bg-image>

See background-image

<position>

See background-position

<repeat-style>

See background-repeat

<bg-size>

See background-size.

Accessibility concerns

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

• MDN Understanding WCAG, Guideline 1.1 explanations
• Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0

Formal definition

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
Computed value	as each of the properties of the shorthand: background-image: as specified, but with <url> values 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: computed color
Animation type	as each of the properties of the shorthand: background-color: a color background-image: discrete background-clip: discrete background-position: repeatable list of simple list of length, percentage, or calc background-size: repeatable list of simple list of length, percentage, or calc background-repeat: discrete background-attachment: discrete

Formal syntax

[ <bg-layer> , ]* <final-bg-layer>where <bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box><final-bg-layer> = <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>where <bg-image> = none | <image><bg-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()> | <paint()> | <cross-fade()> | <gradient><length-percentage> = <length> | <percentage>where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><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> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] || [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage>

Examples

Setting backgrounds with color keywords and images

HTML

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

CSS

.warning { 
  background: pink; 
}

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

Specifications

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The 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 1The definition of 'background' in that specification.	Recommendation	Initial definition

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
background	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 3.5	Safari Full support 1	WebView Android Full support 2	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
SVG image as background	Chrome Full support 1	Edge Full support 12	Firefox Full support 4	IE Full support 9	Opera Full support 9.5	Safari Full support 3.1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
Values of background-clip longhand	Chrome Full support 21	Edge Full support 12	Firefox Full support 22	IE Full support 9	Opera Full support 15	Safari Full support 5.1	WebView Android Full support 3	Chrome Android Full support 25	Firefox Android Full support 22	Opera Android Full support 14	Safari iOS Full support 4	Samsung Internet Android Full support 1.5
Values of background-origin longhand	Chrome Full support 21	Edge Full support 12	Firefox Full support 22	IE Full support 9	Opera Full support 15	Safari Full support 5.1	WebView Android Full support 3	Chrome Android Full support 25	Firefox Android Full support 22	Opera Android Full support 14	Safari iOS Full support 4	Samsung Internet Android Full support 1.5
Values of background-size longhand	Chrome Full support 21	Edge Full support 12	Firefox Full support 9	IE Full support 9	Opera Full support 21	Safari Full support 5.1	WebView Android Full support 3	Chrome Android Full support 25	Firefox Android Full support 18	Opera Android Full support 14	Safari iOS Full support 4	Samsung Internet Android Full support 1.5
Multiple backgrounds	Chrome Full support 1	Edge Full support 12	Firefox Full support 3.6	IE Full support 9	Opera Full support 10.5	Safari Full support 1.3	WebView Android Full support 2	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

Legend

Full support  

Full support

See also

• box-decoration-break
• Using gradients
• Using multiple backgrounds

background by Mozilla Contributors is licensed under CC-BY-SA 2.5.