Autres propriétés de la même famille

Background-Position (propriété CSS)

Définit à quel endroit se positionne l'image d'arrière-plan. Si cette dernière est répétée sur toute la surface (Background-Repeat:Repeat), la propriété Background-Posistion provoque simplement un décalage du motif. Si cette propriété n'est pas définie, l'image se cale en haut à gauche de l'élément.

Deux valeurs peuvent être utilisées simultanément, la première pour le positionnement horizontal et la deuxième pour le positionnement vertical. Lorsqu'une seule des deux valeurs est indiquée, l'autre est assimilée à Center.

Voir aussi les propriétés Background-Color, Background-Image, Background-Repeat, Background-Attachment, et également la propriété résumée Background.

Valeurs pour Background-Position.

TopL'image d'arrière-plan est affichée en haut de l'élément.
CenterL'image d'arrière-plan est affichée au milieu de l'élément (dans le sens vertical).
BottomL'image d'arrière-plan est affichée en bas de l'élément.
LeftL'image d'arrière-plan est affichée à gauche de l'élément.
CenterL'image d'arrière-plan est affichée au centre de l'élément (dans le sens horizontal).
RightL'image d'arrière-plan est affichée à droite de l'élément.
[Valeur] [Valeur]L'image d'arrière-plan est affichée à l'emplacement indiqué par les deux coordonnées.
Si une seule des deux valeurs est indiquée, elle définit la position horizontale (l'image sera centrée verticalement).
Le point 0,0 correspond au coin en haut à gauche.
% %L'image d'arrière-plan est affichée à l'emplacement spécifié par les deux pourcentages.
Si un seul des deux pourcentage est indiqué, il définit la position horizontale (l'image sera centrée verticalement).
Ici aussi, 0%,0% correspond au coin en haut à gauche.
InheritValeurs identiques à celles de l'élément parent.

Exemples.

Si l'image n'est pas répétée (background-repeat:no-repeat) la position de l'image est par défaut en haut à gauche de l'élément.
Si vous avez l'impression que les fleurs tournent dès que vous les quittez des yeux, les CSS n'y sont pour rien.

background:url(img/background-position-1.png) no-repeat;

La propriété Background-Position n'est pas spécifiée.
L'image se cale en haut à gauche de l'élément (top left)

background:url(img/background-position-1.png) no-repeat
background-position:top;

La position horizontale n'est pas spécifiée : l'image se place au centre.

background:url(img/background-position-1.png) no-repeat
background-position:left;

Cas symétrique du précédent.

background:url(img/background-position-1.png) no-repeat
background-position:80% 20%;

Les positions horizontales et verticales sont toutes deux spécifiées : l'image se place à l'endroit indiqué.

background:url(img/background-position-1.png) no-repeat
background-position: 20%;

Un seul pourcentage est indiqué : il définit la position horizontale.

Lorsque l'image est répétée, l'effet de background-position se traduit pas un décalage du motif. La différence est visible sur les deux cadres ci-dessous.

background:url(img/background-position-1.png) repeat
background-position:top left;

 
 
 

background:url(img/background-position-1.png) repeat
background-position:center center;

 
 
 

Pour toute utilisation des informations de cette page, reportez vous au copyright