Propriété CSS background-position-y
La propriété CSS background-position-y définit la position verticale d'une image d'arrière-plan. Exemples et démonstrations interactives.
La propriété CSS background-position-y définit la position verticale d'une image d'arrière-plan à l'intérieur de son élément. Il s'agit de la moitié verticale du raccourci background-position : là où background-position accepte à la fois une valeur horizontale et une valeur verticale, background-position-y contrôle uniquement le placement haut/bas, laissant le placement gauche/droite à background-position-x.
On y recourt lorsqu'on souhaite déplacer verticalement une image d'arrière-plan sans redéclarer la valeur horizontale — par exemple, pour épingler un filigrane en bas d'une section hero, ou pour ajuster précisément l'endroit où commence un motif. Lorsqu'un élément comporte plusieurs images d'arrière-plan, on peut fournir une valeur par couche, séparées par des virgules, et chaque valeur est associée à l'image correspondante.
Le décalage vertical est mesuré par rapport à la zone de positionnement de l'arrière-plan (par défaut la boîte de rembourrage de l'élément). Une longueur se compte depuis le bord supérieur vers le bas ; un pourcentage aligne des points correspondants sur l'image et sur la zone (voir Valeurs ci-dessous).
Les valeurs négatives sont valides — background-position-y: -20px décale l'image vers le haut, au-delà du bord supérieur.
| Valeur initiale | top |
|---|---|
| S'applique à | Tous les éléments. |
| Hérité | Non. |
| Animatable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.backgroundPositionY = "bottom"; |
Syntaxe
Valeurs CSS background-position-y
background-position-y: top | center | bottom | length | percentage | initial | inherit;Exemple de la propriété background-position-y avec la valeur "top" :
Exemple de code CSS background-position-y
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: top;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Résultat
Exemple de la propriété background-position-y avec la valeur "bottom" :
Exemple CSS background-position-y avec bottom
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: bottom;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Exemple de la propriété background-position-y avec la valeur "center" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: center;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Exemple de la propriété background-position-y avec une valeur de longueur :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: 90px;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Exemple de la propriété background-position-y avec une valeur en pourcentage :
Les pourcentages se comportent différemment des longueurs. Avec une longueur telle que 90px, le haut de l'image est placé à 90px sous le bord supérieur de la zone. Avec un pourcentage, le point situé à N% du haut de l'image est aligné avec le point situé à N% du haut de la zone — ainsi 0% correspond à top, 100% à bottom, et 50% à center. C'est ce qui permet aux valeurs en pourcentage de garder une image surdimensionnée visible quelle que soit la hauteur du conteneur.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: 70%;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| top | Aligne le bord supérieur de l'image d'arrière-plan avec le bord supérieur de la couche de positionnement de l'arrière-plan. |
| center | Aligne le centre de l'image d'arrière-plan avec le centre de la couche de positionnement de l'arrière-plan. |
| bottom | Aligne le bord inférieur de l'image d'arrière-plan avec le bas de la couche de positionnement de l'arrière-plan. |
| length | Définit le décalage vertical de l'image d'arrière-plan par rapport au bord supérieur de la couche de positionnement. |
| percentage | Définit le décalage vertical de l'image d'arrière-plan par rapport au conteneur. 0% aligne le bord supérieur de l'image avec le bord supérieur du conteneur, 100% aligne le bord inférieur avec le bord inférieur du conteneur, et 50% centre verticalement l'image d'arrière-plan. |
| initial | Affecte la valeur par défaut à la propriété. |
| inherit | Hérite de la valeur de la propriété depuis son élément parent. |
Propriétés associées
background-position— définit la position horizontale et verticale en une seule déclaration.background-position-x— le pendant horizontal de cette propriété.- Propriétés CSS3 — aperçu des propriétés introduites en CSS3.