background-size

  • Revision slug: CSS/background-size
  • Revision title: background-size
  • Revision id: 15054
  • Created:
  • Creator: Waldo
  • Is current revision? No
  • Comment 61 words added, 9 words removed

Revision Content

{{ CSSRef() }}

Summary

-moz-background-size vertically and horizontally scales an image specified for use in a background.

  • {{ Xref_cssinitial() }}: auto 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: [ <percentage> | <length> | auto ]
                      [ <percentage> | <length> | auto ] ? ;
-moz-background-size: contain;
-moz-background-size: cover;

Values

{{ Xref_csspercentage() }}
Scales the background image in the desired dimension to the specified percentage of the background positioning area, which is determined by the value of -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 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.
{{ Xref_csslength() }}
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

/* ...to be written or copied from elsewhere... */

Specifications

Browser compatibility

Browser Lowest Version Support of
Internet Explorer --- ---
Firefox 3.6 -moz-background-size, as described in the CSS3 working draft, explained above
Netscape --- ---
Opera 9.something ? -o-background-size, with some bugs, see below
Safari (WebKit) 2.something ? -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.

See also

{{ CSS_Reference:Background() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p><code>-moz-background-size</code> vertically and horizontally scales an image specified for use in a background.</p>
<ul> <li>{{ Xref_cssinitial() }}: auto auto</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 name="Syntax">Syntax</h3>
<pre class="eval">-moz-background-size: [ &lt;percentage&gt; | &lt;length&gt; | auto ]
                      [ &lt;percentage&gt; | &lt;length&gt; | auto ] ? ;
</pre>
<pre class="eval">-moz-background-size: contain;
</pre>
<pre class="eval">-moz-background-size: cover;
</pre>
<h3 name="Values">Values</h3>
<dl> <dt>{{ Xref_csspercentage() }}</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 <code><a class="internal" href="/en/CSS/-moz-background-origin" title="en/CSS/-moz-background-origin">-moz-background-origin</a></code>.  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 <a class="internal" href="/en/CSS/background-attachment" title="en/CSS/background-attachment">attachment</a> 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>{{ Xref_csslength() }}</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>
<p><code>contain</code> 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.  <code>cover</code> 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.</p>
<h3 name="Examples">Examples</h3>
<pre>/* ...to be written or copied from elsewhere... */
</pre>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-size">CSS 3</a></li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> <td>---</td> </tr> <tr> <td>Firefox</td> <td>3.6</td> <td><code>-moz-background-size</code>, as described in the CSS3 working draft, explained above</td> </tr> <tr> <td>Netscape</td> <td>---</td> <td>---</td> </tr> <tr> <td>Opera</td> <td>9.something ?</td> <td><code>-o-background-size</code>, with some bugs, see below</td> </tr> <tr> <td>Safari (WebKit)</td> <td>2.something ?</td> <td><code>-webkit-background-size</code>, but from an older CSS3 draft, see below</td> </tr> </tbody>
</table>
<p>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.  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.</p><h3 name="See_also">See also</h3>
<p>{{ CSS_Reference:Background() }}</p>
Revert to this revision