{{CSSRef("CSS Background")}}

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

{{EmbedInteractiveExample("pages/css/background.html")}}

The property is a shorthand that sets the following properties in a single declaration: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, and {{cssxref("background-attachment")}}.

As with all shorthand properties, any omitted sub-values will be set to their initial value.

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:

Values

<attachment>
See {{cssxref("background-attachment")}}
<box>
See {{cssxref("background-clip")}} and {{cssxref("background-origin")}}
<background-color>
See {{cssxref("background-color")}}
<bg-image>
See {{Cssxref("background-image")}}
<position>
See {{cssxref("background-position")}}
<repeat-style>
See {{cssxref("background-repeat")}}
<bg-size>
See {{cssxref("background-size")}}.

Formal syntax

{{csssyntax}}

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: pink; 
}

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

Result

{{EmbedLiveSample("Examples")}}

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.

Specifications

Specification Status Comment
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}} {{Spec2('CSS3 Backgrounds')}} The shorthand property has been extended to support multiple backgrounds and the new {{cssxref("background-size")}}, {{cssxref("background-origin")}} and {{cssxref("background-clip")}} properties.
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}} {{Spec2('CSS2.1')}} No significant changes
{{SpecName('CSS1', '#background', 'background')}} {{Spec2('CSS1')}} Initial definition

{{cssinfo}}

Browser compatibility

{{Compat("css.properties.background")}}

See also