background
The background
shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background
shorthand property value declaration are set to their default values.
Try it
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
css
/* 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");
/* Global values */
background: inherit;
background: initial;
background: revert;
background: revert-layer;
background: unset;
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 bothbackground-origin
andbackground-clip
. If it is included twice, the first occurrence setsbackground-origin
, and the second setsbackground-clip
. - The
<background-color>
value may only be included in the last layer specified.
Values
<attachment>
-
See
background-attachment
. Default:scroll
. <box>
-
See
background-clip
andbackground-origin
. Default:border-box
andpadding-box
respectively. <background-color>
-
See
background-color
. Default:transparent
. <bg-image>
-
See
background-image
. Default:none
. <position>
-
See
background-position
. Default: 0% 0%. <repeat-style>
-
See
background-repeat
. Default:repeat
. <bg-size>
-
See
background-size
. Default:auto
.
The following three lines of CSS are equivalent:
css
background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;
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.
Formal definition
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:
|
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Formal syntax
background =
[ <bg-layer># , ]? <final-bg-layer>
<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>
<bg-image> =
<image> |
none
<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 [0,∞]> | 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-box
<image> =
<url> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
Examples
Setting backgrounds with color keywords and images
HTML
html
<p class="topbanner">
Starry sky<br />
Twinkle twinkle<br />
Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>
CSS
css
.warning {
background: pink;
}
.topbanner {
background: url("starsolid.gif") #99f repeat-y fixed;
}
Result
Specifications
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-background |
Browser compatibility
BCD tables only load in the browser