background

  • Revision slug: Web/CSS/background
  • Revision title: background
  • Revision id: 510491
  • Created:
  • Creator: dvdrtrgn
  • Is current revision? No
  • Comment realign pipes with points

Revision Content

{{ CSSRef("CSS Background") }}

Summary

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: {{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") }}.

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

{{cssbox("background")}}

Syntax

Formal syntax: {{csssyntax("background")}}
               where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} 
                                       ^            ^              ^                 ^                ^              ^
                              <'background-image'>  |     <'background-size>         |    <'background-attachment'>  |
                                           <'background-position'>         <'background-repeat'>            <'background-origin'>
                                                                                                            & <'background-clip'>
               and <final-bg-layer> = <bg-layer> || <'background-color'>
Note: The {{cssxref("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:

<'background-attachment'>
See {{ cssxref("background-attachment") }}
<'background-clip'>
See {{ cssxref("background-clip") }}
<'background-color'>
See {{ cssxref("background-color") }}
<'background-image'>
See {{ Cssxref("background-image") }}
<'background-origin'>
See {{ Cssxref("background-origin") }}
<'background-position'>
See {{ cssxref("background-position") }}
<'background-repeat'>
See {{ cssxref("background-repeat") }}
<'background-size'>
See {{ cssxref("background-size") }}. This property must be specified after background-position, separated with the '/' character.

Examples

{{ CSSLiveSample('background.html') }}

body { 
  background: red; 
}

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

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') }}  

Browser compatibility

{{ CompatibilityTable }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("1.0") }} 1.0 4.0 3.5 1.0
Multiple backgrounds {{ CompatGeckoDesktop("1.9.2") }} 1.0 9.0 10.5 1.3
SVG image as background {{ CompatGeckoDesktop("2.0") }} {{ CompatVersionUnknown }} 9.0 # {{ CompatVersionUnknown }} {{ CompatVersionUnknown }}
Support for {{cssxref("background-size")}} {{ CompatGeckoDesktop("18.0")}} 21.0 # 9.0 {{ CompatVersionUnknown }} {{ CompatNo }}
Support for {{cssxref("background-origin")}} and {{cssxref("background-clip")}} {{ CompatGeckoDesktop("22.0")}} {{ CompatNo }} {{CompatUnknown}} {{ CompatNo }} {{ CompatNo }}
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatGeckoMobile("1.9.2") }} 2.1 {{ CompatUnknown }} 10.0 3.2
Multiple backgrounds {{ CompatGeckoMobile("1.9.2") }} 2.1 {{ CompatUnknown }} 10.0 3.2
SVG image as background {{ CompatGeckoMobile("2.0") }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
Support for {{cssxref("background-size")}} {{ CompatGeckoMobile("18.0")}} {{ CompatNo }} {{ CompatVersionUnknown }} {{ CompatVersionUnknown }} {{ CompatNo }}
Support for {{cssxref("background-origin")}} and {{cssxref("background-clip")}} {{ CompatGeckoMOBILE("22.0")}} {{ CompatNo }} {{ CompatUnknown }} {{ CompatNo }} {{ CompatNo }}

See also

Revision Source

<div>
 {{ CSSRef("CSS Background") }}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>background</code> CSS property is a shorthand for setting the individual background 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-clip")}}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, and {{ Cssxref("background-attachment") }}.</p>
<p>The <code>background</code> CSS shorthand property assigns explicit given values and sets missing properties to their initial values.</p>
<p>{{cssbox("background")}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: <code>{{csssyntax("background")}}</code>
               where &lt;bg-layer&gt; = &lt;bg-image&gt; || &lt;position&gt; [ / &lt;bg-size&gt; ]? || &lt;repeat-style&gt; || &lt;attachment&gt; || &lt;box&gt;{1,2} 
                                       ^            ^              ^                 ^                ^              ^
                              &lt;'background-image'&gt;  |     &lt;'background-size&gt;         |    &lt;'background-attachment'&gt;  |
                                           &lt;'background-position'&gt;         &lt;'background-repeat'&gt;            &lt;'background-origin'&gt;
                                                                                                            &amp; &lt;'background-clip'&gt;
               and &lt;final-bg-layer&gt; = &lt;bg-layer&gt; || &lt;'background-color'&gt;
</pre>
<div class="note">
 <strong>Note:</strong> The {{cssxref("background-color")}} can only be defined on the last background, as there is only one background color for the whole element.</div>
<h3 id="Values" name="Values">Values</h3>
<p>One or more of the following, in any order:</p>
<dl>
 <dt>
  <code>&lt;'background-attachment'&gt;</code></dt>
 <dd>
  See {{ cssxref("background-attachment") }}</dd>
 <dt>
  <code>&lt;'background-clip'&gt;</code></dt>
 <dd>
  See {{ cssxref("background-clip") }}</dd>
 <dt>
  <code>&lt;'background-color'&gt;</code></dt>
 <dd>
  See {{ cssxref("background-color") }}</dd>
 <dt>
  <code>&lt;'background-image'&gt;</code></dt>
 <dd>
  See {{ Cssxref("background-image") }}</dd>
 <dt>
  <code>&lt;'background-origin'&gt;</code></dt>
 <dd>
  See {{ Cssxref("background-origin") }}</dd>
 <dt>
  <code>&lt;'background-position'&gt;</code></dt>
 <dd>
  See {{ cssxref("background-position") }}</dd>
 <dt>
  <code>&lt;'background-repeat'&gt;</code></dt>
 <dd>
  See {{ cssxref("background-repeat") }}</dd>
 <dt>
  <code>&lt;'background-size'&gt;</code></dt>
 <dd>
  See {{ cssxref("background-size") }}. This property must be specified after <strong>background-position</strong>, separated with the '/' character.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>{{ CSSLiveSample('background.html') }}</p>
<pre class="brush:css' highlight:[2,6];">
body { 
  background: red; 
}

.topbanner { 
  background: url("topbanner.png") #00D repeat-y fixed; 
}
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Backgrounds', '#the-background', 'background') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td>The shorthand property has been extended to support multiple backgrounds and the new {{ cssxref("background-size") }}, {{cssxref("background-origin")}} and {{ cssxref("background-clip") }} properties.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'colors.html#propdef-background', 'background') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>No significant changes</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#background', 'background') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Firefox (Gecko)</th>
    <th>Chrome</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatGeckoDesktop("1.0") }}</td>
    <td>1.0</td>
    <td>4.0</td>
    <td>3.5</td>
    <td>1.0</td>
   </tr>
   <tr>
    <td>Multiple backgrounds</td>
    <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
    <td>1.0</td>
    <td>9.0</td>
    <td>10.5</td>
    <td>1.3</td>
   </tr>
   <tr>
    <td>SVG image as background</td>
    <td>{{ CompatGeckoDesktop("2.0") }}</td>
    <td>{{ CompatVersionUnknown }}</td>
    <td>9.0<a class="external" href="http://msdn.microsoft.com/en-us/ie/hh393506#_CSS3_BG_Borders" title="http://msdn.microsoft.com/en-us/ie/hh393506#_CSS3_BG_Borders"> #</a></td>
    <td>{{ CompatVersionUnknown }}</td>
    <td>{{ CompatVersionUnknown }}</td>
   </tr>
   <tr>
    <td>Support for {{cssxref("background-size")}}</td>
    <td>{{ CompatGeckoDesktop("18.0")}}</td>
    <td>21.0 <a href="http://peter.sh/2012/05/tab-sizing-string-values-for-indexeddb-and-chrome-21/" title="http://peter.sh/2012/05/tab-sizing-string-values-for-indexeddb-and-chrome-21/">#</a></td>
    <td>9.0</td>
    <td>{{ CompatVersionUnknown }}</td>
    <td>{{ CompatNo }}</td>
   </tr>
   <tr>
    <td>Support for {{cssxref("background-origin")}} and {{cssxref("background-clip")}}</td>
    <td>{{ CompatGeckoDesktop("22.0")}}</td>
    <td>{{ CompatNo }}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{ CompatNo }}</td>
    <td>{{ CompatNo }}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>Android</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatGeckoMobile("1.9.2") }}</td>
    <td>2.1</td>
    <td>{{ CompatUnknown }}</td>
    <td>10.0</td>
    <td>3.2</td>
   </tr>
   <tr>
    <td>Multiple backgrounds</td>
    <td>{{ CompatGeckoMobile("1.9.2") }}</td>
    <td>2.1</td>
    <td>{{ CompatUnknown }}</td>
    <td>10.0</td>
    <td>3.2</td>
   </tr>
   <tr>
    <td>SVG image as background</td>
    <td>{{ CompatGeckoMobile("2.0") }}</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatUnknown }}</td>
   </tr>
   <tr>
    <td>Support for {{cssxref("background-size")}}</td>
    <td>{{ CompatGeckoMobile("18.0")}}</td>
    <td>{{ CompatNo }}</td>
    <td>{{ CompatVersionUnknown }}</td>
    <td>{{ CompatVersionUnknown }}</td>
    <td>{{ CompatNo }}</td>
   </tr>
   <tr>
    <td>Support for {{cssxref("background-origin")}} and {{cssxref("background-clip")}}</td>
    <td>{{ CompatGeckoMOBILE("22.0")}}</td>
    <td>{{ CompatNo }}</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatNo }}</td>
    <td>{{ CompatNo }}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
 <li>{{ CSS_Reference:Background }}</li>
 <li>{{ cssxref("-moz-background-inline-policy") }}</li>
 <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="Using gradients">Using gradients</a></li>
 <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Multiple backgrounds</a></li>
</ul>
Revert to this revision