Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 15062 of background-size

  • Revision slug: CSS/background-size
  • Revision title: background-size
  • Revision id: 15062
  • Created:
  • Creator: Waldo
  • Is current revision? No
  • Comment add links to examples; inline exampling is tedious, and this works well enough; 81 words added, 11 words removed

Revision Content

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

Summary

The -moz-background-size CSS property specifies the size of the background images.

  • {{ 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:  [ {{ Xref_csspercentage() }}| {{ Xref_csslength() }}| auto ]
                       [ {{ Xref_csspercentage() }}| {{ Xref_csslength() }}| auto ] ?
-moz-background-size:  contain
-moz-background-size:  cover

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.

Browser compatibility

Browser Lowest version Support of Keywords
contain | cover
Internet Explorer --- --- ---
Firefox (Gecko) 3.6 (1.9.2) -moz-background-size
as described in the CSS3 working draft, explained above
3.6 (1.9.2)
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.

Specifications

See also

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

Revision Source

<p>{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.2") }}</p>
<h3>Summary</h3>
<p>The<code> -moz-background-size </code>CSS property specifies the size of the background images.</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 class="eval">-moz-background-size:  [ {{ Xref_csspercentage() }}| {{ Xref_csslength() }}| auto ]
                       [ {{ Xref_csspercentage() }}| {{ Xref_csslength() }}| auto ] ?
</pre>
<pre class="eval">-moz-background-size:  contain
</pre>
<pre class="eval">-moz-background-size:  cover
</pre>
<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>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>Firefox (Gecko)</td> <td>3.6 (1.9.2)</td> <td><code>-moz-background-size</code><br> as described in the CSS3 working draft, explained above</td> <td>3.6 (1.9.2)</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>
</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> Working draft</li> <li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-size">CSS 3 Backgrounds and borders #background-size</a> Editor's draft</li>
</ul>
<h3>See also</h3>
<ul> <li>{{ CSS_Reference:Background() }}</li> <li>{{ cssxref("-moz-background-origin") }}, {{ cssxref("-moz-background-clip") }}</li>
</ul>
Revert to this revision