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  

Compatibilité des navigateurs

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

Voir également

Background-related CSS properties: background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size

Étiquettes et contributeurs liés au document

Contributeurs à cette page : enogael, teoli, FredB, tregagnon, Mgjbot, Kyodev, Fredchat
Dernière mise à jour par : enogael,