background-position

Résumé

La propriété CSS background-position indique la position initiale d'une image d'arrière-plan, par rapport à la zone de positionnement défini par background-origin, pour chaque image renseignée.

Si la valeur pour cette propriété n'est pas définie dans une propriété raccourcie background appliqué à l'élément après une définition de background-position, la valeur de cette propriété est réinitialisée à sa valeur initiale par la propriété raccourcie.

Valeur initiale 0% 0%
S'applique à tous les éléments
Héritée non
Pourcentages se réfère à la taille de la zone de positionnement de l'arrière-plan, moins la taille de l'image
Média visuel
Valeur calculée Si une ou deux valeurs sont indiquées, pour une <longueur> : la valeur absolue ; autrement un pourcentage. Si trois ou quatre valeurs sont indiquées, deux paires de mots-clés plus une longueur ou un pourcentage.

Syntaxe

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

Valeurs

Accepte une ou deux valeur, jusqu'à quatres valeurs dans certains navigateurs. Les <percentage> négatifs et <longueur> négatives sont acceptés.

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.

Si une seule valeur est indiquée, la seconde sera traitée comme étant center.

Si aucune des valeurs définies est un mot-clé, la première valeur représentera la position horizontale et la seconde valeur présentera la position verticale.

La dernière spécification autorise l'utilisation de quatres valeurs afin de décaler l'image d'arrière-plan depuis n'importe quel coin, et pas seulement le coin supérieur gauche. Se référer au tableau de compatibilité des navigateurs pour le support.

<pourcentage>: 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.
<longueur>: 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: Correspond à 0% pour la position verticale.
bottom: Correspond à 100% pour la position verticale.
left: Correspond à 0% pour la position horizontale.
right: Correspond à 100% pour la position horizontale.
center: Correspond à 50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is.

Combinaisons de mots-clés

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%'.

Exemples

Voir l'exemple sur une page

.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	Statut	Commentaire
CSS Backgrounds and Borders Module Level 3	Candidate Recommendation	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	Recommendation	Autorise le mélange de valeurs mots-clef, `<longueur>` et `<percentage>`.
CSS 1 (traduction française)	Recommendation

Fonction	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Support de base	1.0	1.0 (1.7 ou moins)	4.0	3.5	1.0 (85)
Fonds multiples	1.0	3.6 (1.9.2)	9.0	10.5	1.3 (312)
Syntaxe à 4 valeurs	Pas de support WebKit bug 37514	13.0 (13.0)	9.0	10.5	Pas de support WebKit bug 37514

Fonction	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Support de base	(Oui)	1.0 (1)	(Oui)	(Oui)	(Oui)
Fonds multiples	?	1.0 (1.9.2)	?	?	?
Syntaxe à 4 valeurs	Pas de support	13.0 (13.0)	?	?	Pas de support