mozilla

Compare Revisions

background-size

Change Revisions

Revision 15098:

Revision 15098 by Waldo on

Revision 15099:

Revision 15099 by Sheppy on

Title:
background-size
background-size
Slug:
CSS/background-size
CSS/background-size
Tags:
css, "CSS Reference", NeedsMobileBrowserCompatTable
css, "CSS Reference", NeedsMobileBrowserCompatTable
Content:

Revision 15098
Revision 15099
n92      Interpretation of possible values depends on the image's inn92      Interpretation of possible values depends on the image's in
>trinsic dimensions (width and height) and intrinsic proportion (r>trinsic dimensions (width and height) and intrinsic proportion (r
>atio of width and height).  A bitmap image always has intrin>atio of width and height).  A bitmap image always has intrin
>sic dimensions and an intrinsic proportion.  A vector image >sic dimensions and an intrinsic proportion.  A vector image 
>may have both intrinsic dimensions (and thus must have an intrins>may have both intrinsic dimensions (and thus must have an intrins
>ic proportion).  It also may have one or no intrinsic dimens>ic proportion).  It also may have one or no intrinsic dimens
>ion, and in either case it might or might not have an intrinsic p>ion, and in either case it might or might not have an intrinsic p
>roportion.  Gradients are treated as images with no intrinsi>roportion.  Gradients are treated as images with no intrinsi
>c dimensions or intrinsic proportion.  (This behavior change>c dimensions or intrinsic proportion.
>d in Firefox 8: prior to Firefox 8, gradients were treated as ima 
>ges with no intrinsic dimensions, with an intrinsic proportion id 
>entical to that of the background positioning area.)  Backgr 
>ound images generated from elements using -moz-element (which act 
>ually match an element) are currently treated as images with the  
>dimensions of the element, or of the background positioning area  
>if the element is SVG, with the corresponding intrinsic proportio 
>n.  (This is not the currently specified behavior, which is  
>that the intrinsic dimensions and proportion should be those of t 
>he element in all cases.) 
93    </p>
94    <div class="geckoVersionNote" style="undefined">
95      <p>
96        {{ gecko_callout_heading("8.0") }}
97      </p>
98      <p>
99        This behavior changed in Gecko 8.0 {{ geckoRelease("8.0")
 > }}. Before this, gradients were treated as images with no intrin
 >sic dimensions, with an intrinsic proportion identical to that of
 > the background positioning area.
100      </p>
101    </div>
93    </p>102    <p>
103      Background images generated from elements using {{ cssxref(
 >"-moz-element") }} (which actually match an element) are currentl
 >y treated as images with the dimensions of the element, or of the
 > background positioning area if the element is SVG, with the corr
 >esponding intrinsic proportion.
104    </p>
105    <div class="note">
106      <strong>Note:</strong> This is not the currently-specified 
 >behavior, which is that the intrinsic dimensions and proportion s
 >hould be those of the element in all cases.
107    </div>
n130      <a class=" external" href="http://whereswalden.com/files/mon144      <a class="external" href="http://whereswalden.com/files/moz
>zilla/background-size/page-cover.html" target="_blank">This demon>illa/background-size/page-cover.html" target="_blank">This demons
>stration of <code>background-size: cover</code></a> and <a class=>tration of <code>background-size: cover</code></a> and <a class="
>" external" href="http://whereswalden.com/files/mozilla/backgroun>external" href="http://whereswalden.com/files/mozilla/background-
>d-size/page-contain.html" target="_blank">this demonstration of <>size/page-contain.html" target="_blank">this demonstration of <co
>code>background-size: contain</code></a> are meant to be opened i>de>background-size: contain</code></a> are meant to be opened in 
>n new windows so that you can see how <code>contain</code> and <c>new windows so that you can see how <code>contain</code> and <cod
>ode>cover</code> behave when the background positioning area's di>e>cover</code> behave when the background positioning area's dime
>mensions vary. <a class=" external" href="http://whereswalden.com>nsions vary. <a class="external" href="http://whereswalden.com/fi
>/files/mozilla/background-size/more-examples.html">This series of>les/mozilla/background-size/more-examples.html">This series of de
> demos of how <code>background-size</code> works and interacts wi>mos of how <code>background-size</code> works and interacts with 
>th other <code>background-*</code> properties</a> should pretty m>other <code>background-*</code> properties</a> should pretty much
>uch cover the remaining ground in how to use <code>background-siz> cover the remaining ground in how to use <code>background-size</
>e</code> alone and in conjunction with other properties.>code> alone and in conjunction with other properties.
t151      If you are specifying a gradient as background and have spet165      If you are specifying a gradient as background and have spe
>cified a <code>background-size</code> to go with it, it's best no>cified a <code>background-size</code> to go with it, it's best no
>t to specify a size that uses a single auto component, or is spec>t to specify a size that uses a single auto component, or is spec
>ified using only a width value (for example, <code>background-siz>ified using only a width value (for example, <code>background-siz
>e: 50%</code>).&nbsp; Rendering of gradients in such cases change>e: 50%</code>).&nbsp; Rendering of gradients in such cases change
>d in Firefox 8, and at present it is generally inconsistent acros>d in Firefox 8, and at present it is generally inconsistent acros
>s browsers, which do not all implement rendering in full accordan>s browsers, which do not all implement rendering in full accordan
>ce with <a class=" external" href="http://www.w3.org/TR/css3-back>ce with <a class="external" href="http://www.w3.org/TR/css3-backg
>ground/#the-background-size" title="http://www.w3.org/TR/css3-bac>round/#the-background-size" title="http://www.w3.org/TR/css3-back
>kground/#the-background-size">the CSS3 <code>background-size</cod>ground/#the-background-size">the CSS3 <code>background-size</code
>e> specification</a> and with <a class=" external" href="http://d>> specification</a> and with <a class="external" href="http://dev
>ev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/>.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/cs
>csswg/css3-images/#gradients">the CSS3 Image Values gradient spec>swg/css3-images/#gradients">the CSS3 Image Values gradient specif
>ification</a>.>ication</a>.

Back to History