background-size

  • Revision slug: CSS/background-size
  • Revision title: background-size
  • Revision id: 15072
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 1 words removed

Revision Content

{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.2") }}

Summary

The background-size CSS property specifies the size of the background images.
-moz-background-size is supported by Gecko version 1.9.2 (Firefox 3.6).{{ warning("To support both Firefox 3.6 and newer versions, you have to include both properties in the stylesheet. See examples.") }}

  • {{ Xref_cssinitial() }}: auto
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: see below
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: for <length> the absolute value, otherwise a percentage

Syntax

-moz-background-size:  <bg-size>[, <bg-size>]*   /* Gecko 1.9.2 (Firefox 3.6) */
background-size:  <bg-size>[, <bg-size>]*        /* Gecko 2.0 (Firefox 4.0) and later */

Where <bg-size> is one of:

  • [ {{ Xref_csspercentage() }}| {{ Xref_csslength() }}| auto ]
    [ {{ Xref_csspercentage() }}| {{ Xref_csslength() }}| auto ] ?
  • contain
  • cover

Multiple values apply to individual background layers, from front to back, in the same manner as for all other background properties.

Values

<percentage>
Scales the background image in the desired dimension to the specified percentage of the background positioning area, which is determined by the value of {{ cssxref("-moz-background-origin") }}.  The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content.  If the background's {{ cssxref("background-attachment","attachment") }} is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present.
<length>
Scales the background image to the specified length in the desired dimension.
auto
Scales the background image in the relevant direction such that its intrinsic proportions are maintained.

The first value determines how the image is scaled horizontally, the second how it is scaled vertically.  If only one value is specified, the second value is implicitly auto.  If both values are auto, the image is used as the background at its original size.  Negative sizes are not allowed.

contain
Specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area. 
cover
Specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

Examples

This demonstration of background-size: cover and this demonstration of background-size: contain are meant to be opened in new windows so that you can see how contain and cover behave when the background positioning area's dimensions vary. This series of demos of how background-size works and interacts with other background-* properties should pretty much cover the remaining ground in how to use background-size alone and in conjunction with other properties.

Notes

While this property is new in Gecko 1.9.2 (Firefox 3.6), it is possible to stretch a image fully over the background in Firefox 3.5 by using {{ cssxref("-moz-border-image") }}.

.foo {
        background-image: url(bg-image.png);

       -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
         -o-background-size: 100% 100%;           /* Opera 9.5 */
    -webkit-background-size: 100% 100%;           /* Safari 3.0 */
            background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
 
       -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

Browser compatibility

Browser Lowest version Support of Keywords
contain | cover
Internet Explorer --- --- ---
Firefox (Gecko) 3.6 (1.9.2) -moz-background-size 3.6 (1.9.2)
4.0 (2.0) background-size
Opera 9.5 -o-background-size
with some bugs, see below
---
Safari (WebKit) 3.0 (522) -webkit-background-size
but from an older CSS3 draft, see below
---
  • As of July 2009, Opera's implementation does not support the contain or cover keywords, and its computation of the background positioning area is incorrect for fixed backgrounds.  Opera also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical clipping dimension.
  • WebKit-based browsers as of July 2009 implement an older draft of CSS3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.
  • Konqueror 3.5.4 supports -khtml-background-size.
  • -moz-background-size is no longer supported in Gecko 2.0; you must use background-size instead.

Specifications

See also

  • {{ CSS_Reference:Background() }}
  • {{ cssxref("-moz-background-origin") }}, {{ cssxref("-moz-background-clip") }}
  • Multiple backgrounds

{{ languages( { "ja": "ja/CSS/-moz-background-size" } ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.2") }}</p>
<h3>Summary</h3>
<p>The<code> background-size </code>CSS property specifies the size of the background images.<br>
<code>-moz-background-size </code>is supported by Gecko version 1.9.2 (Firefox 3.6).{{ warning("To support both Firefox 3.6 and newer versions, you have to include both properties in the stylesheet. See examples.") }}</p>
<ul> <li>{{ Xref_cssinitial() }}:<code> auto</code></li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: see below</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: for &lt;length&gt; the absolute value, otherwise a percentage</li>
</ul>
<h3>Syntax</h3>
<pre>-moz-background-size:  &lt;bg-size&gt;[, &lt;bg-size&gt;]*   /* Gecko 1.9.2 (Firefox 3.6) */</pre>
<pre>background-size:  &lt;bg-size&gt;[, &lt;bg-size&gt;]*        /* Gecko 2.0 (Firefox 4.0) and later */</pre>
<p>Where <strong>&lt;bg-size&gt;</strong> is one of:</p>
<ul> <li><code>[ {{ Xref_csspercentage() }}| {{ Xref_csslength() }}| auto ]<br> [ {{ Xref_csspercentage() }}| {{ Xref_csslength() }}| auto ] ?</code></li> <li><code>contain<br> </code></li> <li><code>cover</code></li>
</ul>
<p>Multiple values apply to individual background layers, from front to back, in the same manner as for all other background properties.</p>
<h3>Values</h3>
<dl> <dt>&lt;percentage&gt;</dt> <dd>Scales the background image in the desired dimension to the specified percentage of the background positioning area, which is determined by the value of {{ cssxref("-moz-background-origin") }}.  The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content.  If the background's {{ cssxref("background-attachment","attachment") }} is<code> fixed</code>, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present.</dd> <dt>&lt;length&gt;</dt> <dd>Scales the background image to the specified length in the desired dimension.</dd> <dt>auto</dt> <dd>Scales the background image in the relevant direction such that its intrinsic proportions are maintained.</dd>
</dl>
<p>The first value determines how the image is scaled horizontally, the second how it is scaled vertically.  If only one value is specified, the second value is implicitly<code> auto</code>.  If both values are<code> auto</code>, the image is used as the background at its original size.  Negative sizes are not allowed.</p>
<dl> <dt>contain</dt> <dd>Specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area. </dd> <dt>cover</dt> <dd>Specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.</dd>
</dl>
<h3>Examples</h3>
<p><a class=" external" href="http://whereswalden.com/files/mozilla/background-size/page-cover.html" target="_blank">This demonstration of <code>background-size: cover</code></a> and <a class=" external" href="http://whereswalden.com/files/mozilla/background-size/page-contain.html" target="_blank">this demonstration of <code>background-size: contain</code></a> are meant to be opened in new windows so that you can see how <code>contain</code> and <code>cover</code> behave when the background positioning area's dimensions vary. <a class=" external" href="http://whereswalden.com/files/mozilla/background-size/more-examples.html">This series of demos of how <code>background-size</code> works and interacts with other <code>background-*</code> properties</a> should pretty much cover the remaining ground in how to use <code>background-size</code> alone and in conjunction with other properties.</p>
<h3>Notes</h3>
<p>While this property is new in Gecko 1.9.2 (Firefox 3.6), it is possible to stretch a image fully over the background in Firefox 3.5 by using {{ cssxref("-moz-border-image") }}.</p>
<pre>.foo {
        background-image: url(bg-image.png);

       -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
         -o-background-size: 100% 100%;           /* Opera 9.5 */
    -webkit-background-size: 100% 100%;           /* Safari 3.0 */
            background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
 
       -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}
</pre>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> <th>Support of</th> <th>Keywords<br> <code>contain | cover</code></th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> <td>---</td> <td>---</td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td>3.6 (1.9.2)</td> <td><code>-moz-background-size</code></td> <td rowspan="2">3.6 (1.9.2)</td> </tr> <tr> <td>4.0 (2.0)</td> <td><code>background-size</code></td> </tr> <tr> <td>Opera</td> <td>9.5</td> <td><code>-o-background-size</code><br> with some bugs, see below</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td>3.0 (522)</td> <td><code>-webkit-background-size</code><br> but from an older CSS3 draft, see below</td> <td>---</td> </tr> </tbody>
</table>
<ul> <li>As of July 2009, Opera's implementation does not support the<code> contain </code>or<code> cover </code>keywords, and its computation of the background positioning area is incorrect for fixed backgrounds.  Opera also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical <em>clipping</em> dimension.</li> <li>WebKit-based browsers as of July 2009 implement an older draft of CSS3<code> background-size </code>in which an omitted second value is treated as <em>duplicating</em> the first value; this draft does not include the<code> contain </code>or<code> cover </code>keywords.</li> <li>Konqueror 3.5.4 supports<code> -khtml-background-size</code>.</li> <li><code>-moz-background-size</code> is no longer supported in Gecko 2.0; you must use <code>background-size</code> instead.</li>
</ul>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">CSS 3 Backgrounds and borders #background-size</a></li>
</ul>
<h3>See also</h3>
<ul> <li>{{ CSS_Reference:Background() }}</li> <li>{{ cssxref("-moz-background-origin") }}, {{ cssxref("-moz-background-clip") }}</li> <li><a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple backgrounds">Multiple backgrounds</a></li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/-moz-background-size" } ) }}</p>
Revert to this revision