background

  • Revision slug: CSS/background
  • Revision title: background
  • Revision id: 6019
  • Created:
  • Creator: JonRimmer
  • Is current revision? No
  • Comment Update IE compatibility; 1 words added, 1 words removed

Revision Content

{{ CSSRef() }}

Summary

The background CSS property is a shorthand property for setting the individual background property values in a single place in the style sheet. background can be used to set the values for one or more of: {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("-moz-background-size") }}, and {{ Cssxref("background-attachment") }}.

The background shorthand property assigns explicit given values and sets missing properties to their initial values.

  • {{ Xref_cssinitial() }}:  transparent || none || repeat || scroll || 0% 0%
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: allowed on {{ Cssxref("background-position") }}
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: see individual properties

Syntax

background:  [<bg-layer>, ]* <final-bg-layer>

Where:

<bg-layer>
[ <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
|  {{ Cssxref("inherit") }}
<final-bg-layer>
[ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
|  {{ Cssxref("inherit") }} || <background-color>

{{ gecko_callout_heading("1.9.2") }}

Support for multiple backgrounds was added in Gecko 1.9.2; prior to this, only a single background could be specified.

{{ gecko_callout_heading("2.0") }}

Gecko 2.0 {{ geckoRelease("2.0") }} introduced support for using SVG images as CSS backgrounds.

Values

One or more of the following, in any order:

<background-color>
See {{ cssxref("background-color") }}
<background-image>
See {{ Cssxref("background-image") }}
<background-repeat>
See {{ cssxref("background-repeat") }}
<background-attachment>
See {{ cssxref("background-attachment") }}
<background-position>
See {{ cssxref("background-position") }}

Examples

{{ CSSRefExampleLink("background") }}

body { background: red; }

.topbanner { background: url("topbanner.png") #00D repeat-y fixed; }

Notes

The background property first sets the individual background properties to their initial values, then assigns the explicit values specified in the declaration. You do not have to define a value for each of the individual properties, only those you want to change from their initial defaults.

Browser compatibility

Browser Lowest version Multiple backgrounds
Internet Explorer 4.0 9.0
Firefox (Gecko) 1.0 (1.0) 3.6 (1.9.2)
Opera 3.5 10.5
Safari (WebKit) 1.0 (85) 1.3 (312)

Specifications

See also

{{ HTML5ArticleTOC() }}

{{ languages( { "de": "de/CSS/background", "fr": "fr/CSS/background", "it": "it/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background", "ko": "ko/CSS/background", "es": "es/CSS/background" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> background </code>CSS property is a shorthand property for setting the individual background property values in a single place in the style sheet.<code> background </code>can be used to set the values for one or more of: {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("-moz-background-size") }}, and {{ Cssxref("background-attachment") }}.</p>
<p>The<code> <span class="propinst-background">background</span> </code>shorthand property assigns explicit given values and sets missing properties to their initial values.</p>
<ul> <li>{{ Xref_cssinitial() }}:<code>  transparent || none || repeat || scroll || 0% 0%</code></li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: allowed on {{ Cssxref("background-position") }}</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: see individual properties</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">background:  [&lt;bg-layer&gt;, ]* &lt;final-bg-layer&gt;
</pre>
<p>Where:</p>
<dl> <dt>&lt;bg-layer&gt;</dt> <dd><code>[ &lt;background-image&gt; || &lt;background-repeat&gt; || &lt;background-attachment&gt; || &lt;background-position&gt; ]<br> |  {{ Cssxref("inherit") }}</code></dd> <dt>&lt;final-bg-layer&gt;</dt> <dd><code>[ &lt;background-color&gt; || &lt;background-image&gt; || &lt;background-repeat&gt; || &lt;background-attachment&gt; || &lt;background-position&gt; ]<br> |  {{ Cssxref("inherit") }} || &lt;background-color&gt;</code></dd>
</dl>
<div class="geckoVersionNote">
<p>{{ gecko_callout_heading("1.9.2") }}</p>
<p>Support for <a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple backgrounds">multiple backgrounds</a> was added in Gecko 1.9.2; prior to this, only a single background could be specified.</p>
</div>
<div class="geckoVersionNote">
<p>{{ gecko_callout_heading("2.0") }}</p>
<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduced support for using SVG images as CSS backgrounds.</p>
</div>
<h3>Values</h3>
<p>One or more of the following, in any order:</p>
<dl> <dt>&lt;background-color&gt;</dt> <dd>See {{ cssxref("background-color") }}</dd> <dt>&lt;background-image&gt;</dt> <dd>See {{ Cssxref("background-image") }}</dd> <dt>&lt;background-repeat&gt;</dt> <dd>See {{ cssxref("background-repeat") }}</dd> <dt>&lt;background-attachment&gt;</dt> <dd>See {{ cssxref("background-attachment") }}</dd> <dt>&lt;background-position&gt;</dt> <dd>See {{ cssxref("background-position") }}</dd>
</dl>
<h3>Examples</h3>
<p>{{ CSSRefExampleLink("background") }}</p>
<pre>body { background: red; }

.topbanner { background: url("topbanner.png") #00D repeat-y fixed; }
</pre>
<h3>Notes</h3>
<p>The<code> background </code>property first sets the individual background properties to their initial values, then assigns the explicit values specified in the declaration. You do not have to define a value for each of the individual properties, only those you want to change from their initial defaults.</p>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> <th>Multiple backgrounds</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> <td>9.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>3.6 (1.9.2)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>10.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.3 (312)</td> </tr> </tbody>
</table>
<h3>Specifications</h3>
<ul> <li><a class=" external" href="http://www.w3.org/TR/css3-background/" title="http://www.w3.org/TR/css3-background/">CSS Backgrounds and Borders Module Level 3</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">CSS 2.1 Colors and backgrounds #background</a></li>
</ul>
<h3>See also</h3>
<ul> <li>{{ CSS_Reference:Background() }}</li> <li>{{ cssxref("-moz-background-size") }}, {{ cssxref("-moz-background-inline-policy") }}</li> <li><a href="/en/Using_gradients" title="en/Using gradients">Using gradients</a></li> <li><a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple backgrounds">Multiple backgrounds</a></li>
</ul>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "de": "de/CSS/background", "fr": "fr/CSS/background", "it": "it/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background", "ko": "ko/CSS/background", "es": "es/CSS/background" } ) }}</p>
Revert to this revision