Propriété CSS background-position-x
La propriété CSS background-position-x définit la position horizontale d'une image d'arrière-plan. Voir la syntaxe et des exemples pratiques.
La propriété background-position-x définit la position horizontale (axe x) d'une image d'arrière-plan à l'intérieur de son élément. Elle est le pendant de background-position-y, qui contrôle la position verticale. Ensemble, elles forment la version détaillée de la propriété raccourcie background-position.
Par défaut, une background-image est positionnée dans le coin supérieur gauche de l'élément et, sauf si background-repeat est modifiée, elle est répétée sur tout l'élément. Définir background-position-x vous permet de déplacer l'image vers la gauche ou la droite sans toucher à son positionnement vertical.
Lorsqu'un élément possède plusieurs images d'arrière-plan, vous pouvez fournir à background-position-x une liste séparée par des virgules — une valeur par couche, dans le même ordre que celui des images listées :
/* two background layers, each positioned independently on the x-axis */
background-position-x: left, 20%;Cette page couvre la syntaxe, toutes les valeurs acceptées, la manière dont les pourcentages et les longueurs sont mesurés, ainsi que des exemples pratiques que vous pouvez exécuter.
Note
En CSS moderne, il est généralement plus clair d'utiliser la propriété raccourcie
background-position, qui définit les deux axes à la fois.background-position-xest particulièrement utile lorsque vous souhaitez animer ou remplacer uniquement l'axe horizontal en laissant la position verticale inchangée.
Les valeurs négatives sont valides — background-position-x: -30px décale l'image hors du bord gauche.
| Valeur initiale | left |
|---|---|
| S'applique à | Tous les éléments. |
| Héritage | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.backgroundPositionX = "right"; |
Syntaxe
Valeurs CSS de background-position-x
background-position-x: left | center | right | length | percentage | initial | inherit;Exemple de la propriété background-position-x :
Exemple de code CSS background-position-x
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 70%;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Résultat
Exemple de la propriété background-position-x avec la valeur "center" :
Exemple CSS background-position-x center
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-x;
background-position-x: center;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Exemple de la propriété background-position-x avec la valeur "left" :
Exemple CSS background-position-x left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: left;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Exemple de la propriété background-position-x avec la valeur "length" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 30px;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Comment les pourcentages et les longueurs sont mesurés
Une source fréquente de confusion est la différence entre les pourcentages et les longueurs :
- Une longueur (
30px,2rem) décale le bord gauche de l'image par rapport au bord gauche de la zone de positionnement de cette valeur. - Un pourcentage aligne le même point relatif de l'image avec le même point relatif de la zone. Ainsi,
0%aligne les bords gauches,100%aligne les bords droits, et50%centre l'image. C'est pourquoi un pourcentage supérieur à0%ne déplace pas simplement l'image de « autant de pour cent de la largeur » — il interpole entre les deux bords.
Les mots-clés sont des raccourcis pour ces pourcentages : left = 0%, center = 50%, et right = 100%.
Valeurs
| Valeur | Description |
|---|---|
| left | Spécifie l'alignement du bord gauche de l'image d'arrière-plan avec le bord gauche de la couche de positionnement de l'arrière-plan. |
| center | Spécifie l'alignement du centre de l'image d'arrière-plan avec le centre de la couche de positionnement de l'arrière-plan. |
| right | Spécifie l'alignement du bord droit de l'image d'arrière-plan avec le bord droit de la couche de positionnement de l'arrière-plan. |
| length | Un décalage fixe (par exemple 30px ou 2rem) du bord gauche de l'image par rapport au bord gauche de la zone de positionnement. Les longueurs négatives sont autorisées et déplacent l'image hors du côté gauche. |
| percentage | Spécifie le décalage de la position horizontale de l'image d'arrière-plan par rapport au conteneur. 0% aligne le bord gauche de l'image avec le bord gauche du conteneur, 100% aligne le bord droit de l'image avec le bord droit du conteneur, et 50% centre horizontalement l'image d'arrière-plan. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite de la propriété de son élément parent. |
Compatibilité des navigateurs
background-position-x est prise en charge par tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Elle est largement disponible, mais comme elle a été standardisée après la propriété raccourcie background-position, préférez la version raccourcie lorsque vous devez définir les deux axes et n'utilisez la version détaillée que si vous souhaitez spécifiquement contrôler ou animer l'axe horizontal seul.
Propriétés associées
background-position— la propriété raccourcie qui définit les deux axes à la fois.background-position-y— le pendant vertical de cette propriété.background-image— définit l'image à positionner.background-repeat— contrôle si et comment l'image est répétée.