background-position-x

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété background-position-x définit la position horizontale initiale de chaque image d'arrière-plan par rapport à l'origine, définie avec background-origin.

Pour plus d'informations, se référer à la documentation de la propriété background-position qui existe depuis plus longtemps.

Exemple interactif

Note : La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec background ou background-position située après la déclaration de background-position-x.

Syntaxe

css
/* Valeurs avec un mot-clé */
background-position-x: left;
background-position-x: right;
background-position-x: center;

/* Valeurs proportionnelles */
/* Type <percentage>        */
background-position-x: 25%;

/* Valeurs de longueur */
/* Type <length>       */
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;

/* Déclaration indiquant un décalage  */
/* relatif à un des côtés de la boîte */
background-position-x: right 3px;

/* Gestion de plusieurs valeurs */
/* pour plusieurs arrières-plan */
background-position-x: 0px, center;

/* Valeurs globales */
background-position-x: inherit;
background-position-x: initial;
background-position-x: unset;

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.

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>

Une valeur de longueur (type <length>) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.

<percentage>

Une valeur en pourcentages (type <percentage>) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan, proportionnellement à la largeur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.

Définition formelle

Valeur initiale0%
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Pourcentagesfait référence à la largeur de la zone de positionement de l'arrière-plan moins la largeur de l'image d'arrière-plan
Valeur calculéeUne liste dont chaque élément se compose d'un décalage (exprimé comme la combinaison d'une longueur absolue et d'un pourcentage) et d'un mot-clé pour l'origine
Type d'animationune liste répétable

Syntaxe formelle

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

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

Spécifications

Specification
CSS Backgrounds and Borders Module Level 4
# background-position-longhands

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi