background-size

  • Raccourci de la révision : CSS/background-size
  • Titre de la révision : background-size
  • ID de la révision : 49384
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire 2 words added, 6 words removed

Contenu de la révision

Résumé

La propriété CSS background-size spécifie la dimension des images d'arrière-plan.

Note : si la valeur de cette propriété n'est pas définie dans une propriété raccourcie {{ cssxref("background") }} qui s'applique à l'élément après la propriété CSS background-size, la valeur de cette propriété sera réinitialisée à sa valeur par défaut par la propriété raccourcie.
  • {{ Xref_cssinitial() }} : auto auto
  • S'applique à : tous les éléments
  • {{ Xref_cssinherited() }} : non
  • Pourcentages : voir ci-dessous
  • Média: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: la valeur absolue pour {{ Xref_csslength() }}, un pourcentage dans les autres cas

Syntaxe

background-size:  background-size[, background-size]*

:

background-size
est l'un des mots-clés suivants :
  • contain, qui spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi grande que possible tout en assurant que les deux dimensions sont plus petites ou égales aux dimensions de la surface de positionnement.
  • cover, qui spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi petite que possible tout en assurant que les deux dimensions soient supérieures ou égales aux dimensions de la surface de positionnement. 
ou une ou deux des valeurs suivantes, indiquant respectivementor la dimension horizontale et la dimensiosn verticale (si seulement une des deux est précisée, la seconde est définie à auto) :
  • une valeur {{ Xref_csspercentage() }} qui met à l'échelle l'image d'arrière-plan aux dimensions correspondants à la surface de positionnement de l'arrière-plan, qui est définie par la valeur de  {{ cssxref("background-origin") }}. La surface de positionnement de l'arrière-plan est, par défaut, la surface contenant le contenu et les marges de remplissage (padding) ; la surface peut aussi être modifiée au contenu seulement ou à la zone contenant les bordures, les marges de remplissage et le contenu. Si la propriété {{ cssxref("background-attachment","attachment") }} est définie à fixed, la zone de positionnement est alors toute la surface d'affichage du navigateur, excluant les zones couvertes par les barres de défilement si elles sont présentes. Les pourcentages négatifs ne sont pas acceptés.
  • une valeur {{ Xref_csslength() }} qui met à l'échelle l'image d'arrière-plan en mettant la dimension correspondant à la valeur définie. Les longueurs négatives ne sont pas acceptées.
  • le mot-clé auto qui met à l'échelle l'image d'arrière-plan dans la direction correspondante de manière à conserver les proportions de l'image originale.

L'interprétation des différentes valeurs possible dépend des dimensions originales de l'image (largeur et hauteur) et de la proportion originale (rapport de la largeur sur la hauteur). Une image bitmap possède toujours des dimensions et une proportion intrinsèques. Une image vectorielle peut avoir deux dimensions intrinsèques (ce qui induit une proportion intrinsèque). Mais elle peut aussi avoir une voire aucune dimension intrisèque, et dans chacun des cas peut avoir ou non une proportion intrisèque. Les dégradés sont considérés comme des images n'ayant ni dimensions intrisèques ni proportion intrinsèque. 

{{ gecko_callout_heading("8.0") }}

Ce comportement à changé dans Gecko 8.0 {{ geckoRelease("8.0") }}. Avant cela, les dégradés étaient considérés comme des images sans dimensions intrisèques mais avec une proportion intrisèque correspondant à cette de la surface de positionnement de l'arrière-plan.

Les images d'arrière-plan générées depuis des éléments utilisant {{ cssxref("-moz-element") }} (qui s'applique à un élément) sont actuellement traités comme des images possédant les dimensions de l'élément, ou de la surface de positionnement de l'arrière-plan si l'élément est en SVG, et ceci avec la proportion intrinsèque correspondante.

Note : ceci n'est pas le comportement spécifié, qui lui dit que les dimensions et proportions intrinsèques doivent être celles de l'élément quelque soit le cas de figure.

La taille des images d'arrière-plans générées est calculée de la manière suivante :

Si les deux composantes de background-size sont précisées et ne sont pas auto :
L'image d'arrière-plan est affichée aux dimensiosn spécifiées.
Si background-size est à contain ou cover :
L'image est affichée, conservant la proportion originale, à la plus grande dimensions contenue ou couvrant la surface de positionnement de l'arrière-plan. Si l'image n'a pas de proportion intrinsèque, alors elle est affichée aux dimensions de la surface de positionnement de l'arrière-plan. 
Si background-size est à auto ou auto auto :
Si l'image possède deux dimensios intrinsèques, elle est affichée à cette taille. Si elle n'a ni dimensions intrinsèque ni proportion intrinsèque, elle est affichée à la taille de la surface de positionnement de l'arrière-plan. Si elle n'a pas de dimensions intrisèques mais une proportion, elle est affichée comme si la valeur contain avait été spécifiée. Si l'image a une dimension intrinsèque et une proportion intrinsèque, elle est affiché à la taille déterminée par une dimension et une proportion. Si l'image a une dimension intrisèque mais pas de proportion intrinsèque, elle est affichée en utilisant la dimension originale et l'autre dimensions correspondant à la surface de positionnement de l'arrière-plan.
Si background-size n'a qu'une composante auto et une composante qui n'est pas auto :
Si l'image a une proportion intrinsèque, alors elle est affichée en utilisant la dimension spécifiée et la seconde dimension est calculée grâce à la proportion intrinsèque et la dimension précisée. Si l'image n'a pas de proportion intrisèque, la dimension spécifiée est utilisée. Pour la seconde, si une autre dimension intrisèque existe alors elle est utilisée sinon la dimension utilisée est celle de la surface de positionnement de l'arrière-plan.

Il faut noter que le dimensionnement des images vectorielles qui n'ont pas de dimensions intrinsèques ou de proportion intrisèque n'est pas complètement supportée dans tous les navigateurs. Soyez prudents avec les comportements décris ci-dessus et testez dans différents navigateurs (particulièrement avec les versions de Firefox 7 et précédentes et Firefox 8 et suivantes) pour vous assurer que les rendus sont acceptables.

Exemples

Cette démonstration de background-size: cover et cette démonstration de background-size: contain sont supposées être ouvertes dans de nouvelles fenêtres pour que vous puissiez voir comment contain et cover se comportent lorsque la surface de positionnement de l'arrière-plan varie. Cette série de démonstrations montre comment background-size fonctionne et interagi avec les autres propriétés background-* couvre presque exhaustivement l'utilisation de background-size seul et en parallèle d'autres propriétés.

Notes

Si vous définissez un dégradé comme arrière-plan et que vous avec précisé la propriété background-size qui vient avec, il est préférable de ne pas préciser une dimension utilisant une seule composante auto, ou qui utilise seulement une valeur de largeur (par exemple, background-size: 50%). L'affichage des dégradés dans ce cas d'utilisation a été modifié dans Firefox 8, et désormais il est inégal selon les navigateurs, qui n'implémentent pas tous le rendu comme spécifié dans la spécification CSS3 background-size ou dans la spécification des dégradés selon CSS3 Image Values.

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

       /* NON RECOMMANDÉ */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

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

Il faut noter qu'il est particulièrement non recommandé de définir une dimension en pixels et une dimension auto pour un dégradé, puisqu'il est impossible de reproduire le rendu dans les version de Firefox antécédantes à la version 8, et dans les navigateurs qui n'ont pas implémentés le rendu de Firefox 8, sans connaître les dimensions exactes de l'arrière-plan de l'élément qui est défini.

Spécifications

Spécification État Commentaire
CSS Backgrounds and Borders Module Level 3 {{ Spec2('CSS3 Backgrounds') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 1.0{{ property_prefix("-webkit") }} [2] {{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4] 9.0 9.5{{ property_prefix("-o") }}
avec quelques bogues [1]
3.0 (522){{ property_prefix("-webkit") }}
correspondant à un ancien brouillon CSS3 [2]
   
3.0 {{ CompatGeckoDesktop("2.0") }} 10.0 4.1 (532)
Support de contain et cover 3.0 {{ CompatGeckoDesktop("1.9.2") }} 9.0 10.0 4.1 (532)
Support des arrière-plans SVG {{ CompatUnknown() }} {{ CompatGeckoDesktop("8.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
FeaFonction Android Firefox Mobile (Gecko) Windows Phone Opera Mobile Safari Mobile
Support de base {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
2.3
{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Support des arrière-plans SVG {{ CompatUnknown() }} {{ CompatGeckoMobile("8.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

[1] La méthode de calcul de la surface de positionnement de l'arrière plan de Opera 9.5 est incorrecte pour les arrière-plans fixés. Opera 9.5 interprête la forme définissant les deux composantes comme un facteur de mise à l'échelle horizontale, et apparemment, une dimension verticale de coupure (clipping). Ceci a été résolu dans Opera 10.

[2] Les navigateurs utilisant WebKit ont d'abord implémenté un brouillon plus ancien CSS3 de background-size dans lequel une seconde valeur omise était interprétée en copiant la première valeur ; ce brouillon n'inclue pas les mots-clés contain et cover.

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

[4] Tandis que cette propriété est nouvelle dans Gecko 1.9.2 (Firefox 3.6), il est possible d'étirer une image à toute la surface d'arrière-plan dans Firefox 3.5 en utilisant {{ 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) et les autres navigateurs gérant CSS3 */
 
       -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

Voir également

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

Source de la révision

<h2>Résumé</h2>
<p>La propriété CSS <code>background-size</code> spécifie la dimension des images d'arrière-plan.</p>
<div class="note"><strong>Note :</strong> si la valeur de cette propriété n'est pas définie dans une propriété raccourcie {{ cssxref("background") }} qui s'applique à l'élément après la propriété CSS <code>background-size</code>, la valeur de cette propriété sera réinitialisée à sa valeur par défaut par la propriété raccourcie.</div>
<ul class="cssprop"> <li>{{ Xref_cssinitial() }} :<code> auto auto</code></li> <li>S'applique à : tous les éléments</li> <li>{{ Xref_cssinherited() }} : non</li> <li>Pourcentages : voir ci-dessous</li> <li>Média: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: la valeur absolue pour <code>{{ Xref_csslength() }}</code>, un pourcentage dans les autres cas</li>
</ul>
<h2>Syntaxe</h2>
<pre class="syntaxbox">background-size:  <em>background-size</em>[, <em>background-size</em>]*
</pre>
<p>où <strong>: </strong></p>
<dl> <dt><em><strong>background-size</strong></em></dt> <dd style="margin-left: 40px;">est l'un des mots-clés suivants : <ul> <li style="margin-left: 40px;"><code>contain</code>, qui spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi grande que possible tout en assurant que les deux dimensions sont plus petites ou égales aux dimensions de la surface de positionnement.</li> <li style="margin-left: 40px;"><code>cover</code>, qui spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi petite que possible tout en assurant que les deux dimensions soient supérieures ou égales aux dimensions de la surface de positionnement. </li> </ul> ou une ou deux des valeurs suivantes, indiquant respectivementor la dimension horizontale et la dimensiosn verticale (si seulement une des deux est précisée, la seconde est définie à <code>auto</code>) : <ul> <li>une valeur <code>{{ Xref_csspercentage() }}</code> qui met à l'échelle l'image d'arrière-plan aux dimensions correspondants à la surface de positionnement de l'arrière-plan, qui est définie par la valeur de  {{ cssxref("background-origin") }}. La surface de positionnement de l'arrière-plan est, par défaut, la surface contenant le contenu et les marges de remplissage (<code>padding</code>) ; la surface peut aussi être modifiée au contenu seulement ou à la zone contenant les bordures, les marges de remplissage et le contenu. Si la propriété {{ cssxref("background-attachment","attachment") }} est définie à <code>fixed</code>, la zone de positionnement est alors toute la surface d'affichage du navigateur, excluant les zones couvertes par les barres de défilement si elles sont présentes. Les pourcentages négatifs ne sont pas acceptés.</li> <li>une valeur <code>{{ Xref_csslength() }}</code> qui met à l'échelle l'image d'arrière-plan en mettant la dimension correspondant à la valeur définie. Les longueurs négatives ne sont pas acceptées.</li> <li>le mot-clé <code>auto</code> qui met à l'échelle l'image d'arrière-plan dans la direction correspondante de manière à conserver les proportions de l'image originale.</li> </ul> </dd>
</dl>
<p>L'interprétation des différentes valeurs possible dépend des dimensions originales de l'image (largeur et hauteur) et de la proportion originale (rapport de la largeur sur la hauteur). Une image bitmap possède toujours des dimensions et une proportion intrinsèques. Une image vectorielle peut avoir deux dimensions intrinsèques (ce qui induit une proportion intrinsèque). Mais elle peut aussi avoir une voire aucune dimension intrisèque, et dans chacun des cas peut avoir ou non une proportion intrisèque. Les dégradés sont considérés comme des images n'ayant ni dimensions intrisèques ni proportion intrinsèque. </p>
<div class="geckoVersionNote" style="undefined"> <p>{{ gecko_callout_heading("8.0") }}</p> <p>Ce comportement à changé dans Gecko 8.0 {{ geckoRelease("8.0") }}. Avant cela, les dégradés étaient considérés comme des images sans dimensions intrisèques mais avec une proportion intrisèque correspondant à cette de la surface de positionnement de l'arrière-plan.</p>
</div>
<p>Les images d'arrière-plan générées depuis des éléments utilisant {{ cssxref("-moz-element") }} (qui s'applique à un élément) sont actuellement traités comme des images possédant les dimensions de l'élément, ou de la surface de positionnement de l'arrière-plan si l'élément est en SVG, et ceci avec la proportion intrinsèque correspondante.</p>
<div class="note"><strong>Note :</strong> ceci n'est pas le comportement spécifié, qui lui dit que les dimensions et proportions intrinsèques doivent être celles de l'élément quelque soit le cas de figure.</div>
<p>La taille des images d'arrière-plans générées est calculée de la manière suivante :</p>
<dl> <dt>Si les deux composantes de <code>background-size</code> sont précisées et ne sont pas <code>auto</code> :</dt> <dd>L'image d'arrière-plan est affichée aux dimensiosn spécifiées.</dd> <dt>Si <code>background-size</code> est à <code>contain</code> ou <code>cover</code> :</dt> <dd>L'image est affichée, conservant la proportion originale, à la plus grande dimensions contenue ou couvrant la surface de positionnement de l'arrière-plan. Si l'image n'a pas de proportion intrinsèque, alors elle est affichée aux dimensions de la surface de positionnement de l'arrière-plan. </dd> <dt>Si <code>background-size</code> est à <code>auto</code> ou <code>auto auto</code> :</dt> <dd>Si l'image possède deux dimensios intrinsèques, elle est affichée à cette taille. Si elle n'a ni dimensions intrinsèque ni proportion intrinsèque, elle est affichée à la taille de la surface de positionnement de l'arrière-plan. Si elle n'a pas de dimensions intrisèques mais une proportion, elle est affichée comme si la valeur <code>contain</code> avait été spécifiée. Si l'image a une dimension intrinsèque et une proportion intrinsèque, elle est affiché à la taille déterminée par une dimension et une proportion. Si l'image a une dimension intrisèque mais pas de proportion intrinsèque, elle est affichée en utilisant la dimension originale et l'autre dimensions correspondant à la surface de positionnement de l'arrière-plan.</dd> <dt>Si <code>background-size</code> n'a qu'une composante <code>auto</code> et une composante qui n'est pas <code>auto</code> :</dt> <dd>Si l'image a une proportion intrinsèque, alors elle est affichée en utilisant la dimension spécifiée et la seconde dimension est calculée grâce à la proportion intrinsèque et la dimension précisée. Si l'image n'a pas de proportion intrisèque, la dimension spécifiée est utilisée. Pour la seconde, si une autre dimension intrisèque existe alors elle est utilisée sinon la dimension utilisée est celle de la surface de positionnement de l'arrière-plan.</dd>
</dl>
<p>Il faut noter que le dimensionnement des images vectorielles qui n'ont pas de dimensions intrinsèques ou de proportion intrisèque n'est pas complètement supportée dans tous les navigateurs. Soyez prudents avec les comportements décris ci-dessus et testez dans différents navigateurs (particulièrement avec les versions de Firefox 7 et précédentes et Firefox 8 et suivantes) pour vous assurer que les rendus sont acceptables.</p>
<h2>Exemples</h2>
<p><a class="external" href="http://whereswalden.com/files/mozilla/background-size/page-cover.html" target="_blank">Cette démonstration de <code>background-size: cover</code></a> et <a class="external" href="http://whereswalden.com/files/mozilla/background-size/page-contain.html" target="_blank">cette démonstration de <code>background-size: contain</code></a> sont supposées être ouvertes dans de nouvelles fenêtres pour que vous puissiez voir comment <code>contain</code> et <code>cover</code> se comportent lorsque la surface de positionnement de l'arrière-plan varie. <a class="external" href="http://whereswalden.com/files/mozilla/background-size/more-examples.html">Cette série de démonstrations montre comment <code>background-size</code> fonctionne et interagi avec les autres propriétés <code>background-*</code></a> couvre presque exhaustivement l'utilisation de <code>background-size</code> seul et en parallèle d'autres propriétés.</p>
<h2>Notes</h2>
<p>Si vous définissez un dégradé comme arrière-plan et que vous avec précisé la propriété <code>background-size</code> qui vient avec, il est préférable de ne pas préciser une dimension utilisant une seule composante <code>auto</code>, ou qui utilise seulement une valeur de largeur (par exemple, <code>background-size: 50%</code>). L'affichage des dégradés dans ce cas d'utilisation a été modifié dans Firefox 8, et désormais il est inégal selon les navigateurs, qui n'implémentent pas tous le rendu comme spécifié dans <a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-size" title="http://dev.w3.org/csswg/css3-background/#the-background-size">la spécification CSS3 <code>background-size</code></a> ou dans <a class="external" href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">la spécification des dégradés selon CSS3 Image Values</a>.</p>
<pre class="deki-transform">.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* NON RECOMMANDÉ */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       /* ACCEPTABLE */
       background-size: 25px 50px;
       background-size: 50% 50%;
}
</pre>
<p>Il faut noter qu'il est particulièrement non recommandé de définir une dimension en pixels et une dimension <code>auto</code> pour un dégradé, puisqu'il est impossible de reproduire le rendu dans les version de Firefox antécédantes à la version 8, et dans les navigateurs qui n'ont pas implémentés le rendu de Firefox 8, sans connaître les dimensions exactes de l'arrière-plan de l'élément qui est défini.</p><h2 name="Browser_Compatibility">Spécifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Spécification</th> <th scope="col">État</th> <th scope="col">Commentaire</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-size" title="http://dev.w3.org/csswg/css3-background/#the-background-size">CSS Backgrounds and Borders Module Level 3</a></td> <td>{{ Spec2('CSS3 Backgrounds') }}</td> <td> </td> </tr> </tbody>
</table>
<h2 name="Browser_Compatibility">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Fonction</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">Support de base</td> <td>1.0{{ property_prefix("-webkit") }} [2]</td> <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]</td> <td rowspan="2">9.0</td> <td>9.5{{ property_prefix("-o") }}<br> avec quelques bogues [1]</td> <td>3.0 (522){{ property_prefix("-webkit") }}<br> correspondant à un ancien brouillon CSS3 [2]</td> <td rowspan="2"> </td> <td rowspan="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 de <code>contain</code> et <code>cover</code></td> <td>3.0</td> <td>{{ CompatGeckoDesktop("1.9.2") }}</td> <td>9.0</td> <td>10.0</td> <td colspan="3">4.1 (532)</td> </tr> <tr> <td>Support des arrière-plans SVG</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>FeaFonction</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>Windows Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Support de base</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}<br> 2.3</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td>Support des arrière-plans SVG</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("8.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<p>[1] La méthode de calcul de la surface de positionnement de l'arrière plan de Opera 9.5 est incorrecte pour les arrière-plans fixés. Opera 9.5 interprête la forme définissant les deux composantes comme un facteur de mise à l'échelle horizontale, et apparemment, une dimension verticale de coupure (<em>clipping</em>). Ceci a été résolu dans Opera 10.</p>
<p>[2] Les navigateurs utilisant WebKit ont d'abord implémenté un brouillon plus ancien CSS3 de<code> background-size </code>dans lequel une seconde valeur omise était interprétée en <em>copiant</em> la première valeur ; ce brouillon n'inclue pas les mots-clés <code>contain </code>et<code> cover</code>.</p>
<p>[3] Konqueror 3.5.4 supporte<code> -khtml-background-size</code>.</p>
<p>[4] Tandis que cette propriété est nouvelle dans Gecko 1.9.2 (Firefox 3.6), il est possible d'étirer une image à toute la surface d'arrière-plan dans Firefox 3.5 en utilisant {{ cssxref("-moz-border-image") }}.</p>
<pre class="deki-transform">.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) et les autres navigateurs gérant CSS3 */
 
       -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}
</pre>
<h2>Voir également</h2>
<ul> <li><a href="/fr/CSS/Référence_CSS" title="fr/Référence_CSS">Référence CSS</a></li> <li>Propriétés CSS liées à l'arrière-plan : {{ CSS_Reference:Background() }}</li> <li><a href="/fr/CSS/Fonds_multiples" title="Fonds multiples">Arrière-plans multiples</a></li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/-moz-background-size", "en": "en/CSS/background-size"} ) }}</p>
Revenir à cette révision