background-position-x
Baseline Widely available *
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2016.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
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
background-position-x: left; background-position-x: center; background-position-x: 25%; background-position-x: 2rem; background-position-x: right 32px; <section class="display-block" id="default-example"> <div class="transition-all" id="example-element"></div> </section> #example-element { background-color: navajowhite; background-image: url("/shared-assets/images/examples/star.png"); background-repeat: no-repeat; height: 100%; } 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.
Définition formelle
| Valeur initiale | 0% |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | non |
| Pourcentages | fait 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ée | Une 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'animation | une 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 Module Level 4 # background-position-longhands |