La propriétéCSSbackground-position-x définit la position horizontale initiale de chaque image d'arrière-plan. La position est relative à la couche de position définie parbackground-origin.

La valeur de cette propriété est remplacée par toute déclaration des propriétés raccourciesbackground oubackground-position appliquées à l'élément après elle.

Exemple interactif

background-position-x: left;

background-position-x: center;

background-position-x: 25%;

background-position-x: 2rem;

background-position-x: right 32px;

<section>  <div></div></section>

#example-element {  background-color: navajowhite;  background-image: url("/shared-assets/images/examples/star.png");  background-repeat: no-repeat;  height: 100%;}

Syntaxe

/* Valeurs avec un mot-clé */background-position-x: left;background-position-x: right;background-position-x: center;/* Valeur en pourcentage <percentage> */background-position-x: 25%;/* Valeurs de longueur <length> */background-position-x: 0px;background-position-x: 1cm;background-position-x: 8em;/* Valeurs de décalage relatif */background-position-x: right 3px;background-position-x: left 25%;/* Valeurs multiples */background-position-x: 0px, center;/* Valeurs globales */background-position-x: inherit;background-position-x: initial;background-position-x: revert;background-position-x: revert-layer;background-position-x: unset;

La propriétébackground-position-x se définit avec une ou plusieurs valeurs, séparées par des virgules.

Valeurs

left

Le bord gauche de l'image d'arrière-plan est aligné avec le bord gauche de la zone dédiée à l'arrière-plan.

center

L'image d'arrière-plan est centrée horizontalement par rapport à la zone dédiée à l'arrière-plan.

right

Le côté droit de l'image d'arrière-plan est aligné avec le côté droit de la zone dédiée à l'arrière-plan.

<length>

Le décalage du bord vertical gauche de l'image d'arrière-plan par rapport au bord vertical gauche de la couche de position d'arrière-plan. (Certains navigateurs permettent d'utiliser le bord droit pour le décalage.)

<percentage>

Le décalage de la position horizontale de l'image d'arrière-plan par rapport au conteneur. Une valeur de 0% signifie que le bord gauche de l'image d'arrière-plan est aligné avec le bord gauche du conteneur, et une valeur de 100% signifie que le borddroit de l'image d'arrière-plan est aligné avec le borddroit du conteneur. Ainsi, une valeur de 50% centre l'image d'arrière-plan horizontalement.

Définition formelle

Syntaxe formelle

background-position-x =
[center|[[left|right|x-start|x-end]?<length-percentage>?]!]#

<length-percentage> =
<length>|
<percentage>

Exemples

Exemple simple

L'exemple suivant montre une implémentation d'image d'arrière-plan, avec la position horizontale et la position verticale de l'arrière-plan utilisées pour définir séparément la position horizontale et la position verticale de l'image.

HTML

<div></div>

CSS

div {  width: 300px;  height: 300px;  background-color: skyblue;  background-image: url("https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png");  background-repeat: no-repeat;  background-position-x: center;  background-position-y: bottom;}

Résultat

Valeurs relatives aux côtés

L'exemple suivant montre la prise en charge de la syntaxe de décalage relatif aux côtés, qui permet de décaler l'arrière-plan à partir de n'importe quel bord.

HTML

<div></div>

CSS

div {  width: 300px;  height: 300px;  background-color: seagreen;  background-image: url("https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png");  background-repeat: no-repeat;  background-position-x: right 20px;  background-position-y: bottom 10px;}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriétébackground-position
• La propriétébackground-position-y
• Utiliser plusieurs arrière-plans