Propriété CSS background-position-x
La propriété background-position-x définit la position horizontale d'une couche d'image d'arrière-plan. Une ou plusieurs valeurs peuvent être spécifiées, séparées par des virgules.
Par défaut, une background-image est positionnée dans le coin supérieur gauche de l'élément et répétée à la fois horizontalement et verticalement.
Note
En CSS moderne, il est recommandé d'utiliser la propriété raccourcie
background-positionà la place, carbackground-position-xest rarement utilisée isolément.
INFO
Les valeurs négatives sont valides.
| Valeur initiale | left |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.backgroundPositionX = "right"; |
Syntaxe
Valeurs CSS 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://fr.w3docs.com/build/images/w3docs-logo-black.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://fr.w3docs.com/build/images/w3docs-logo-black.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://fr.w3docs.com/build/images/w3docs-logo-black.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" :
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://fr.w3docs.com/build/images/w3docs-logo-black.png") repeat-y;
background-position-x: 30px;
}
</style>
</head>
<body>
</body>
</html>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 position d'arrière-plan. |
| center | Spécifie l'alignement du centre de l'image d'arrière-plan avec le centre de la couche de position d'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 position d'arrière-plan. |
| length | Spécifie le décalage du bord vertical gauche de l'image d'arrière-plan donnée par rapport au bord vertical gauche de la couche de position d'arrière-plan. |
| 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 d'arrière-plan avec le bord gauche du conteneur, 100% aligne le bord droit de l'image d'arrière-plan 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 la propriété de son élément parent. |
Practice
Quelle est la fonction de la propriété CSS background-position-x ?