background-position

  • Raccourci de la révision : CSS/background-position
  • Titre de la révision : CSS : la propriété background-position
  • ID de la révision : 49517
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire no changes

Contenu de la révision

{{ CSSRef() }}

Résumé

background-position définit la position initiale d'une image d'arrière-plan déclarée.

  • Valeur initiale : 0% 0%
  • S'applique à : tous les éléments
  • Héritée : non
  • Pourcentages : se réfère à la taille de la boîte elle-même
  • Média : visuel
  • Valeur calculée : pour les <length> la valeur absolue, autrement un pourcentage

Syntaxe

background-position: [ [ <percentage> | <length> | left | center | right ]
   [ <percentage> | <length> | top | center | bottom ]? ] |
   [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

Valeurs

<percentage> <percentage>
Avec la paire de valeurs '0% 0%', le coin supérieur gauche de l'image est aligné avec le coin supérieur gauche de la bordure de l'espacement de la boîte. La paire de valeurs '100% 100%' place le coin inférieur droit de l'image dans le coin inférieur droit de l'aire d'espacement. Avec la paire de valeurs '14% 84%', le point situé à 14% vers la droite et 84% vers le bas de l'image est placé au point situé à 14% vers la droite et 84% vers le bas de l'aire d'espacement.
<length> <length>
Avec la paire de valeur '2cm 1cm', le coin supérieur gauche de l'image est placé à 2 cm à droite et à 1 cm en dessous du coin supérieur gauche de l'aire d'espacement.
top left et left top
Identique à '0% 0%'.
top, top center et center top
Identique à '50% 0%'.
right top et top right
Identique à '100% 0%'.
left, left center et center left
Identique à '0% 50%'.
center et center center
Identique à '50% 50%'.
right, right center et center right
Identique à '100% 50%'.
bottom left et left bottom
Identique à '0% 100%'.
bottom, bottom center et center bottom
Identique à '50% 100%'.
bottom right et right bottom
Identique à '100% 100%'.

Si une seule valeur est définie, alors cela spécifie la position horizontale, avec la position verticale à 50%. Autrement, la première valeur spécifie la position horizontale. Les combinaisons de mots-clefs, de longueurs et de pourcentages sont autorisées. Cependant si les mots-clefs sont mélangés avec d'autres valeurs, left et right ne doivent être utilisés que comme première valeur et les mots clefs top et bottom comme seconde valeur. Les positions négatives sont autorisées.

Exemples

{{ CSSLiveSample("background-position") }}

.exampleun {
	background-image: url("logo.png");
	background-position: top;
}

.exampledeux {
	background-image: url("logo.png");
	background-position: 25% 75%;
}

.exampletrois {
	background: url("logo.png") 2cm bottom;
}

.examplequatre {
	background-image: url("logo.png");
	background-position: center 10%;
}

.examplecinq {
	background: url("logo.png") 3em 50%;
}

.examplesix {
	background-image: url("logo.png");
	background-position: right 20px bottom 20px;
}
	
.examplesept { /* Images de fond multiples : 
                  chaque image est associée avec la position correspondante, 
                  de la première à la dernière. */
  background-image: url("img1.png"), url("img2.png");
  background-position: 0px 0px, center;
} 

Spécifications

Spécification État Commentaire
CSS Backgrounds and Borders Module Level 3 {{ Spec2('CSS3 Backgrounds') }} Ajout du support pour les fonds multiples, la syntaxe à quatre valeurs et modification de la définition du pourcentage pour correspondre avec les implémentations.
CSS 2.1 {{ Spec2('CSS2.1') }} Autorise le mélange de valeurs mots-clef, {{ xref_csslength() }} et {{ xref_csspercentage() }}.
CSS 1 (traduction française) {{ Spec2('CSS1') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 {{ CompatGeckoDesktop("1") }} 4.0 3.5 1.0 (85)
Fonds multiples 1.0 {{ CompatGeckoDesktop("1.9.2") }} 9.0 10.5 1.3 (312)
Syntaxe à 4 valeurs {{ CompatNo() }} {{ webkitbug("37514") }} {{ CompatGeckoDesktop("13.0") }} 9.0 10.5 {{ CompatNo() }} {{ webkitbug("37514") }}
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatVersionUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Fonds multiples {{ CompatUnknown() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Syntaxe à 4 valeurs {{ CompatNo() }} {{ CompatGeckoMobile("13.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }}

Voir également

{{ CSS_Reference:Background() }}

Interwiki Language Links

{{ languages( { "en": "en/CSS/background-position", "es": "es/CSS/background-position", "pl": "pl/CSS/background-position" } ) }}

Source de la révision

<p> {{ CSSRef() }}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p><code>background-position</code> définit la position initiale d'une image d'arrière-plan déclarée.
</p>
<ul><li> <a href="fr/CSS/Valeur_initiale">Valeur initiale</a> : 0% 0%
</li><li> S'applique à : tous les éléments
</li><li> <a href="fr/CSS/H%c3%a9ritage">Héritée</a> : non
</li><li> Pourcentages : se réfère à la taille de la boîte elle-même
</li><li> Média : <a href="fr/CSS/M%c3%a9dia/Visuel">visuel</a>
</li><li> <a href="fr/CSS/Valeur_calcul%c3%a9e">Valeur calculée</a> : pour les &lt;length&gt; la valeur absolue, autrement un pourcentage
</li></ul>
<h3 name="Syntaxe"> Syntaxe </h3>
<pre class="eval">background-position: [ [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ]
   [ &lt;percentage&gt; | &lt;length&gt; | top | center | bottom ]? ] |
   [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
</pre>
<h3 name="Valeurs"> Valeurs </h3>
<dl><dt> &lt;percentage&gt; &lt;percentage&gt;
</dt><dd> Avec la paire de valeurs '0% 0%', le coin supérieur gauche de l'image est aligné avec le coin supérieur gauche de la bordure de l'espacement de la boîte. La paire de valeurs '100% 100%' place le coin inférieur droit de l'image dans le coin inférieur droit de l'aire d'espacement. Avec la paire de valeurs '14% 84%', le point situé à 14% vers la droite et 84% vers le bas de l'image est placé au point situé à 14% vers la droite et 84% vers le bas de l'aire d'espacement.
</dd><dt> &lt;length&gt; &lt;length&gt;
</dt><dd> Avec la paire de valeur '2cm 1cm', le coin supérieur gauche de l'image est placé à 2 cm à droite et à 1 cm en dessous du coin supérieur gauche de l'aire d'espacement.
</dd><dt> top left et left top
</dt><dd> Identique à '0% 0%'.
</dd><dt> top, top center et center top
</dt><dd> Identique à '50% 0%'.
</dd><dt> right top et top right
</dt><dd> Identique à '100% 0%'.
</dd><dt> left, left center et center left
</dt><dd> Identique à '0% 50%'.
</dd><dt> center et center center
</dt><dd> Identique à '50% 50%'.
</dd><dt> right, right center et center right
</dt><dd> Identique à '100% 50%'.
</dd><dt> bottom left et left bottom
</dt><dd> Identique à '0% 100%'.
</dd><dt> bottom, bottom center et center bottom
</dt><dd> Identique à '50% 100%'.
</dd><dt> bottom right et right bottom
</dt><dd> Identique à '100% 100%'.
</dd></dl>
<p>Si une seule valeur est définie, alors cela spécifie la position horizontale, avec la position verticale à 50%. Autrement, la première valeur spécifie la position horizontale. Les combinaisons de mots-clefs, de longueurs et de pourcentages sont autorisées. Cependant si les mots-clefs sont mélangés avec d'autres valeurs, <i>left</i> et <i>right</i> ne doivent être utilisés que comme première valeur et les mots clefs <i>top</i> et <i>bottom</i> comme seconde valeur. Les positions négatives sont autorisées.
</p>
<h3 name="Exemples">Exemples</h3>
<p>{{ CSSLiveSample("background-position") }}</p>
<pre class="eval">.exampleun {
	background-image: url("logo.png");
	background-position: top;
}

.exampledeux {
	background-image: url("logo.png");
	background-position: 25% 75%;
}

.exampletrois {
	background: url("logo.png") 2cm bottom;
}

.examplequatre {
	background-image: url("logo.png");
	background-position: center 10%;
}

.examplecinq {
	background: url("logo.png") 3em 50%;
}

.examplesix {
	background-image: url("logo.png");
	background-position: right 20px bottom 20px;
}
	
.examplesept { /* Images de fond multiples : 
                  chaque image est associée avec la position correspondante, 
                  de la première à la dernière. */
  background-image: url("img1.png"), url("img2.png");
  background-position: 0px 0px, center;
} 
</pre>
<h3 name="Sp.C3.A9cifications">Spécifications</h3>
<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://www.w3.org/TR/css3-background/#background-position" title="http://www.w3.org/TR/css3-background/#background-position">CSS Backgrounds and Borders Module Level 3</a></td> <td>{{ Spec2('CSS3 Backgrounds') }}</td> <td>Ajout du support pour les fonds multiples, la syntaxe à quatre valeurs et modification de la définition du pourcentage pour correspondre avec les implémentations.</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position" title="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">CSS 2.1</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td>Autorise le mélange de valeurs mots-clef, {{ xref_csslength() }} et {{ xref_csspercentage() }}.</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS1/#background-position" title="http://www.w3.org/TR/CSS1/#background-position">CSS 1</a> <a class=" external" href="http://www.yoyodesign.org/doc/w3c/css1/#background-position" title="http://www.yoyodesign.org/doc/w3c/css1/#background-position">(traduction française)</a></td> <td>{{ Spec2('CSS1') }}</td> <td> </td> </tr> </tbody>
</table>
<h3 name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h3>
<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>Safari</th> </tr> <tr> <td>Support de base</td> <td>1.0</td> <td>{{ CompatGeckoDesktop("1") }}</td> <td>4.0</td> <td>3.5</td> <td>1.0 (85)</td> </tr> <tr> <td>Fonds multiples</td> <td>1.0</td> <td>{{ CompatGeckoDesktop("1.9.2") }}</td> <td>9.0</td> <td>10.5</td> <td>1.3 (312)</td> </tr> <tr> <td>Syntaxe à 4 valeurs</td> <td>{{ CompatNo() }} {{ webkitbug("37514") }}</td> <td>{{ CompatGeckoDesktop("13.0") }}</td> <td>9.0</td> <td>10.5</td> <td>{{ CompatNo() }} {{ webkitbug("37514") }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Support de base</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatGeckoMobile("1") }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> </tr> <tr> <td>Fonds multiples</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("1.9.2") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td>Syntaxe à 4 valeurs</td> <td>{{ CompatNo() }}</td> <td>{{ CompatGeckoMobile("13.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
<h3 name="Voir_.C3.A9galement"> Voir également </h3>
<p>{{ CSS_Reference:Background() }}
</p><p><span class="comment">Interwiki Language Links</span>
</p>
<div class="noinclude">
</div>
{{ languages( { "en": "en/CSS/background-position", "es": "es/CSS/background-position", "pl": "pl/CSS/background-position" } ) }}
Revenir à cette révision