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.

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

/* 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.
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>
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.

Syntaxe formelle

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


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

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 4
La définition de 'background-position-x' dans cette spécification.
Brouillon de l'éditeur Spécification initiale pour les propriétés détaillées de background-position, implémentée depuis longtemps.

Valeur initialeleft
Applicabilitétous les éléments
Héritéenon
Pourcentagesfait référence à la largeur de la zone de positionement de l'arrière-plan moins la hauteur de l'image d'arrière-plan
Médiavisuel
Valeur calculéeUne liste dont chaque élément se comompose 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'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet 12Firefox Support complet 49IE Support complet 6Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 49Opera Android ? Safari iOS ? Samsung Internet Android Support complet Oui
Two-value syntax (support for offsets from any edge)Chrome Aucun support NonEdge Support complet 12Firefox Support complet 49IE Support complet 9Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 49Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,