mozilla

Version 507701 von background-size

  • Adressname der Version: Web/CSS/background-size
  • Titel der Version: background-size
  • ID der Version: 507701
  • Erstellt:
  • Autor: miko
  • Aktuelle Version? Nein
  • Kommentar Further Translated... Not finished yet

Inhalt der Version

{{CSSRef}}

Übersicht:

Die background-size CSS Eigenschaft definiert die Abmessungen eines Hintergrundbildes. Die Abmessungen des Bildes können komplett festgelegt werden oder nur teilweise, um das eigentliche Seitenverhältnis zu erhalten.

Hinweis: Folgt auf background-size die {{cssxref("background")}} Kurzform und es wird in ihr kein Wert für diese Eigenschaft angegeben, wird der Wert auf den Standardwert zurückgesetzt.
  • Standardwert auto auto
  • Anwendbar auf alle Elemente
  • Vererbbar nein
  • Prozentwerte relativ zum Positionierungsbereich des Hintergrunds
  • Medium visuell
  • Berechneter Wert wie festgelegt, aber mit absoluten Längen

Syntax

Formal syntax: {{csssyntax("background-size")}}
/* Schlüsselwort Syntax */
background-size: cover
background-size: contain

/* Ein-Wert Syntax: Der Wert definiert die Bildbreite,
   die Höhe wird auf 'auto' gesetzt */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* Zwei-Wert Syntax: Der erste Wert definiert die Bildbreite,
   der Zweite die Höhe */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* Werte für mehrere Hintergründe, die durch background-image definiert wurden,
   können kommagetrennt aufgelistet werden */
background-size: auto, auto     /* Nicht zu verwechseln mit background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

background-size: inherit

Values

<length>
Ein {{Xref_csslength}} Wert, der das Hintergrundbild auf die angegebene Länge in der entsprechenden Maßeinheit skaliert. Negative Werte sind nicht erlaubt.
<percentage>
Ein {{Xref_csspercentage}} Wert,  der das Hintergrundbild auf den angegebenen Prozentwert des Hintergrund-Positionierungsbereich skaliert (angegeben durch {{cssxref("background-origin")}}). Standardmäßig umfasst der Positionierungsbereich den Inhalt des Elements und dessen Innenabstand (Padding), kann aber auch so abgeändert werden, dass er nur den Inhalt umfasst oder Inhalt, Innenabstand und Rahmen. Ist die {{cssxref("background-attachment","attachment")}} Eigenschaft auf fixed gesetzt, entspricht der Positionierungsbereich dem Browser-Fenster abzüglich des von eventuellen Scroll-Leisten genutzten Bereichs. Negative Prozentwerte sind nicht erlaubt.
auto
Das auto Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.
cover
Das cover Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt.
contain
Das contain Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist.

Die Interpretation möglicher Werte hängt von den Maßen (Breite und Höhe) und der Proportion (Verhältnis von Breite zu Höhe) des Bildes ab. Eine Rastergrafik hat immer eigene Maße und eine eigene Proportion. Eine Vektorgrafik kann beide eigenen Maße haben (und somit auch eine eigene Proportion). Sie kann aber auch nur ein oder kein eigenes Maß haben. In beiden Fällen kann sie (muss aber nicht) eine eigen Proportion haben. Farbverläufe werden als Grafiken ohne eigene Maße und eigener Proportion behandelt.

Hinweis: Dieses Verhalten hat sich in Gecko 8.0 {{geckoRelease("8.0")}} geändert. Vorher wurden Farbverläufe als Grafiken ohne eigene Maße, aber mit einer eigenen Proportion behandelt. Die Proportion entsprach dabei derjenigen des Positionierungsbereich des Hintergrunds.

Hintergrundbilder, die mittels {{cssxref("-moz-element")}} generiert wurden, werden momentan als Bilder mit den Maßen des Elements behandelt. Außer es handelt sich um ein SVG-Element, dann werden die Maße des Hintergrund-Positionierungsbereich mit der eigenen Proportion verwendet.

Hinweis: Die entspricht nicht dem spezifizierten Verhalten, wonach die Maße und die Proportion stets denjenigen Werten des Elements entsprechen müssen.

Die gerenderte Größe des Hintergrundbildes wird folgendermaßen berechnet:

Falls beide Werte von background-size angegeben werden und nicht auto sind:
Das Hintergrundbild wird mit den angegebenen Werten gerendert.
Falls die Schlüsselwörter contain oder cover gesetzt werden:
Das Bild behält seine eigene Proportion bei, wobei die Maße so berechnet werden, dass das Bild im Hintergrund-Positionierungsbereich enthalten ist beziehungsweise ihn abdeckt. Besitzt das Bild keine eigene Proportion, wird es auf die Größe des Hintergrund-Positionierungsbereichs gerendert.
Falls background-size auto oder auto auto ist:
Besitzt das Bild beide Maße, wird es in dieser Größe gerendert. Hat es keine eigenen Maße und keine eigene Proportion, wird es in der Größe des Hintergrund-Positionierungsbereich gerendert. Hat es keine Maße, aber eine Proportion, wird es so gerendert als ob contain angegeben wurde. Hat es ein Maß angegeben und besitzt eine Proportion, wird es entsprechend dieser Angaben gerendert. Hat es ein Maß und keine Proportion, wird es mit diesem eigenen Maß und dem entsprechenden Maß des Hintergrund-Positionierungsbereichs gerendert.
Falls background-size ein auto und ein nicht-auto Wert besitzt:
Hat das Bild eine eigene Proportion, wird das nicht spezifizierte Maß aus dem angegebenen Maß und der Proportion berechnet. Hat das Bild keine eigene Proportion, wird das angebene Maß und das entsprechende eigene Maß des Bilds verwendet, falls vorhanden. Existiert kein eigenes Maß, wird dasjenige des Hintergrund-Positionierungsbereichs verwendet. 

Note that background sizing for vector images that lack intrinsic dimensions or proportion is not yet fully implemented in all browsers.  Be careful about relying on the behavior described above, and test in multiple browsers (specifically including versions of Firefox 7 or earlier and Firefox 8 or greater) to be sure different renderings are acceptable.

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

If you are specifying a gradient as background and have specified a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%).  Rendering of gradients in such cases changed in Firefox 8, and at present it is generally inconsistent across browsers, which do not all implement rendering in full accordance with the CSS3 background-size specification and with the CSS3 Image Values gradient specification.

.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* NOT RECOMMENDED */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       /* OKAY */
       background-size: 25px 50px;
       background-size: 50% 50%;
}

Note that it's particularly not recommended to use a pixel dimension and an auto dimension with a gradient, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.

Specifications

Specification Status Comment
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}} {{Spec2('CSS3 Backgrounds')}}  

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0{{property_prefix("-webkit")}} [2] {{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}} [4] 9.0 [5] 9.5{{property_prefix("-o")}}
with some bugs [1]
3.0 (522){{property_prefix("-webkit")}}
but from an older CSS3 draft [2]
3.0 {{CompatGeckoDesktop("2.0")}} 10.0 4.1 (532)
Support for
contain and cover
3.0 {{CompatGeckoDesktop("1.9.2")}} 9.0 [5] 10.0 4.1 (532)
Support for SVG backgrounds {{CompatUnknown}} {{CompatGeckoDesktop("8.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Feature Android Firefox Mobile (Gecko) Windows Phone Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
2.3
1.0{{property_prefix("-moz")}}
4.0
{{CompatUnknown}} {{CompatUnknown}} 5.1 (maybe earlier)
Support for SVG backgrounds {{CompatUnknown}} {{CompatGeckoMobile("8.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

[1] Opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds.  Opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical clipping dimension. This has been fixed in Opera 10.

[2] WebKit-based browsers originally implemented 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.

[3] Konqueror 3.5.4 supports -khtml-background-size.

[4] 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);

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          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) */
}

[5] Though Internet Explorer 8 doesn't support the background-size property, it is possible to emulate some of its functionality using the non-standard -ms-filter function:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

This simulates the value cover.

See also

Quelltext der Version

<div>
 {{CSSRef}}</div>
<h2 id=".C3.9Cbersicht.3A">Übersicht:</h2>
<p>Die&nbsp;<code style="font-size: 14px; line-height: inherit;">background-size</code><span style="line-height: inherit;">&nbsp;</span><a href="/en-US/docs/CSS" style="line-height: inherit;" title="CSS">CSS</a>&nbsp;Eigenschaft definiert die Abmessungen eines Hintergrundbildes. Die Abmessungen des Bildes können komplett festgelegt werden oder nur teilweise, um das eigentliche Seitenverhältnis zu erhalten.</p>
<div class="note">
 <strong>Hinweis:</strong> Folgt auf <code>background-size</code> die {{cssxref("background")}} Kurzform und es wird in ihr kein Wert für diese Eigenschaft angegeben, wird der Wert auf den Standardwert zurückgesetzt.</div>
<ul class="cssprop">
 <li><dfn>Standardwert</dfn> auto auto</li>
 <li><dfn>Anwendbar auf</dfn> alle Elemente</li>
 <li><dfn>Vererbbar</dfn> nein</li>
 <li><dfn>Prozentwerte</dfn> relativ zum Positionierungsbereich des Hintergrunds</li>
 <li><dfn>Medium</dfn> visuell</li>
 <li><dfn>Berechneter Wert</dfn> wie festgelegt, aber mit absoluten Längen</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("background-size")}}
</pre>
<pre>
<strong>/* Schlüsselwort Syntax */</strong>
background-size: cover
background-size: contain

<strong>/* Ein-Wert Syntax: Der Wert definiert die Bildbreite,
   die Höhe wird auf 'auto' gesetzt */</strong>
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

<strong>/* Zwei-Wert Syntax: <strong>Der erste Wert definiert die Bildbreite</strong>,
   der Zweite die Höhe */</strong>
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

<strong>/* Werte für mehrere Hintergründe, die durch background-image definiert wurden,
   können kommagetrennt aufgelistet werden */</strong>
background-size: auto, auto     /* Nicht zu verwechseln mit background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

background-size: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
 <dt>
  <code>&lt;length&gt;</code></dt>
 <dd>
  Ein <code>{{Xref_csslength}}</code> Wert, der das Hintergrundbild auf die angegebene Länge in der entsprechenden Maßeinheit skaliert. Negative Werte sind nicht erlaubt.</dd>
 <dt>
  <code>&lt;percentage&gt;</code></dt>
 <dd>
  Ein <code>{{Xref_csspercentage}}</code> Wert,&nbsp; der das Hintergrundbild auf den angegebenen Prozentwert des Hintergrund-Positionierungsbereich skaliert (angegeben durch {{cssxref("background-origin")}}). Standardmäßig umfasst der Positionierungsbereich den Inhalt des Elements und dessen Innenabstand (Padding), kann aber auch so abgeändert werden, dass er nur den Inhalt umfasst oder Inhalt, Innenabstand und Rahmen. Ist die {{cssxref("background-attachment","attachment")}} Eigenschaft auf <code>fixed</code> gesetzt, entspricht der Positionierungsbereich dem Browser-Fenster abzüglich des von eventuellen Scroll-Leisten genutzten Bereichs. Negative Prozentwerte sind nicht erlaubt.</dd>
 <dt>
  <code>auto</code></dt>
 <dd>
  Das <code>auto</code> Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.</dd>
 <dt>
  <code>cover</code></dt>
 <dd>
  Das <code>cover</code> Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt.</dd>
 <dt>
  <code>contain</code></dt>
 <dd>
  Das contain Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist.</dd>
</dl>
<p>Die Interpretation möglicher Werte hängt von den Maßen (Breite und Höhe) und der Proportion (Verhältnis von Breite zu Höhe) des Bildes ab. Eine Rastergrafik hat immer eigene Maße und eine eigene Proportion. Eine Vektorgrafik kann beide eigenen Maße haben (und somit auch eine eigene Proportion). Sie kann aber auch nur ein oder kein eigenes Maß haben. In beiden Fällen kann sie (muss aber nicht) eine eigen Proportion haben. Farbverläufe werden als Grafiken ohne eigene Maße und eigener Proportion behandelt.</p>
<div class="note">
 <strong>Hinweis:</strong> Dieses Verhalten hat sich in Gecko 8.0 {{geckoRelease("8.0")}} geändert. Vorher wurden Farbverläufe als Grafiken ohne eigene Maße, aber mit einer eigenen Proportion behandelt. Die Proportion entsprach dabei derjenigen des Positionierungsbereich des Hintergrunds.</div>
<p>Hintergrundbilder, die mittels {{cssxref("-moz-element")}} generiert wurden, werden momentan als Bilder mit den Maßen des Elements behandelt. Außer es handelt sich um ein SVG-Element, dann werden die Maße des Hintergrund-Positionierungsbereich mit der eigenen Proportion verwendet.</p>
<div class="note">
 <strong>Hinweis:</strong> Die entspricht nicht dem spezifizierten Verhalten, wonach die Maße und die Proportion stets denjenigen Werten des Elements entsprechen müssen.</div>
<p>Die gerenderte Größe des Hintergrundbildes wird folgendermaßen berechnet:</p>
<dl>
 <dt>
  Falls beide Werte von <code>background-size</code> angegeben werden und nicht <code>auto</code> sind:</dt>
 <dd>
  Das Hintergrundbild wird mit den angegebenen Werten gerendert.</dd>
 <dt>
  Falls die Schlüsselwörter <code>contain</code> oder <code>cover</code> gesetzt werden:</dt>
 <dd>
  Das Bild behält seine eigene Proportion bei, wobei die Maße so berechnet werden, dass das Bild im Hintergrund-Positionierungsbereich enthalten ist beziehungsweise ihn abdeckt. Besitzt das Bild keine eigene Proportion, wird es auf die Größe des Hintergrund-Positionierungsbereichs gerendert.</dd>
 <dt>
  Falls <code>background-size </code><code>auto</code> oder <code>auto auto</code> ist:</dt>
 <dd>
  Besitzt das Bild beide Maße, wird es in dieser Größe gerendert. Hat es keine eigenen Maße und keine eigene Proportion, wird es in der Größe des Hintergrund-Positionierungsbereich gerendert. Hat es keine Maße, aber eine Proportion, wird es so gerendert als ob <code>contain</code> angegeben wurde. Hat es ein Maß angegeben und besitzt eine Proportion, wird es entsprechend dieser Angaben gerendert. Hat es ein Maß und keine Proportion, wird es mit diesem eigenen Maß und dem entsprechenden Maß des Hintergrund-Positionierungsbereichs gerendert.</dd>
 <dt>
  Falls <code>background-size</code> ein <code>auto</code> und ein nicht-<code>auto</code> Wert besitzt:</dt>
 <dd>
  Hat das Bild eine eigene Proportion, wird das nicht spezifizierte Maß aus dem angegebenen Maß und der Proportion berechnet. Hat das Bild keine eigene Proportion, wird das angebene Maß und das entsprechende eigene Maß des Bilds verwendet, falls vorhanden. Existiert kein eigenes Maß, wird dasjenige des Hintergrund-Positionierungsbereichs verwendet.&nbsp;</dd>
</dl>
<p>Note that background sizing for vector images that lack intrinsic dimensions or proportion is not yet fully implemented in all browsers.&nbsp; Be careful about relying on the behavior described above, and test in multiple browsers (specifically including versions of Firefox 7 or earlier and Firefox 8 or greater) to be sure different renderings are acceptable.</p>
<h2 id="Examples">Examples</h2>
<p><a href="http://whereswalden.com/files/mozilla/background-size/page-cover.html" target="_blank">This demonstration of <code>background-size: cover</code></a> and <a 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 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>
<h2 id="Notes">Notes</h2>
<p>If you are specifying a gradient as background and have specified a <code>background-size</code> to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, <code>background-size: 50%</code>).&nbsp; Rendering of gradients in such cases changed in Firefox 8, and at present it is generally inconsistent across browsers, which do not all implement rendering in full accordance with <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">the CSS3 <code>background-size</code> specification</a> and with <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">the CSS3 Image Values gradient specification</a>.</p>
<pre class="brush: css">
.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* NOT RECOMMENDED */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       /* OKAY */
       background-size: 25px 50px;
       background-size: 50% 50%;
}
</pre>
<p>Note that it's particularly not recommended to use a pixel dimension and an <code>auto</code> dimension with a gradient, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">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-size', 'background-size')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
 {{CompatibilityTable}}</div>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th colspan="3">Safari (WebKit)</th>
   </tr>
   <tr>
    <td rowspan="2">Basic support</td>
    <td>1.0{{property_prefix("-webkit")}} [2]</td>
    <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}} [4]</td>
    <td rowspan="2">9.0 [5]</td>
    <td>9.5{{property_prefix("-o")}}<br />
     with some bugs [1]</td>
    <td>3.0 (522){{property_prefix("-webkit")}}<br />
     but from an older CSS3 draft [2]</td>
   </tr>
   <tr>
    <td>3.0</td>
    <td>{{CompatGeckoDesktop("2.0")}}</td>
    <td>10.0</td>
    <td>4.1 (532)</td>
   </tr>
   <tr>
    <td>Support for<br />
     <code>contain</code> and <code>cover</code></td>
    <td>3.0</td>
    <td>{{CompatGeckoDesktop("1.9.2")}}</td>
    <td>9.0 [5]</td>
    <td>10.0</td>
    <td colspan="3">4.1 (532)</td>
   </tr>
   <tr>
    <td>Support for SVG backgrounds</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatGeckoDesktop("8.0")}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td colspan="3">{{CompatUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>Windows Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br />
     2.3</td>
    <td>1.0{{property_prefix("-moz")}}<br />
     4.0</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>5.1 (maybe earlier)</td>
   </tr>
   <tr>
    <td>Support for SVG backgrounds</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatGeckoMobile("8.0")}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<p>[1] Opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds.&nbsp; Opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical <em>clipping</em> dimension. This has been fixed in Opera 10.</p>
<p>[2] WebKit-based browsers originally implemented 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>
<p>[3] Konqueror 3.5.4 supports<code> -khtml-background-size</code>.</p>
<p>[4] 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 class="brush:css">
.foo {
  background-image: url(bg-image.png);

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          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>
<p>[5] Though Internet Explorer 8 doesn't support the <code>background-size</code> property, it is possible to emulate some of its functionality using the non-standard <code>-ms-filter</code> function:</p>
<pre class="brush:css">
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";</pre>
<p>This simulates the value <code>cover</code>.</p>
<h2 id="See_also">See also</h2>
<ul>
 <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
 <li>Background-related CSS properties: {{CSS_Reference:Background}}</li>
 <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Multiple backgrounds</a></li>
 <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scaling background images</a></li>
</ul>
Zu dieser Version zurücksetzen