Propriété CSS background-position-y
La propriété background-position-y définit la position verticale pour chaque arrière-plan.
Une ou plusieurs valeurs peuvent être spécifiées, séparées par des virgules.
INFO
Les valeurs négatives sont valides.
| Valeur initiale | top |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.backgroundPositionY = "bottom"; |
Syntaxe
Valeurs CSS background-position-y
css
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
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://fr.w3docs.com/build/images/w3docs-logo-black.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 bottom
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://fr.w3docs.com/build/images/w3docs-logo-black.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" :
Exemple de la propriété background-position-y avec la valeur "center" :
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://fr.w3docs.com/build/images/w3docs-logo-black.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 la valeur "length" :
Exemple de la propriété background-position-y avec la valeur "length" :
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://fr.w3docs.com/build/images/w3docs-logo-black.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 la valeur "percentage" :
Exemple de la propriété background-position-y avec la valeur "percentage" :
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://fr.w3docs.com/build/images/w3docs-logo-black.png") no-repeat;
background-position-y: 70%;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| top | Spécifie l'alignement du bord supérieur de l'image d'arrière-plan avec le bord supérieur de la couche de positionnement 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 positionnement d'arrière-plan. |
| bottom | Spécifie l'alignement du bord inférieur de l'image d'arrière-plan avec le bord inférieur de la couche de positionnement d'arrière-plan. |
| length | Spécifie le décalage vertical de l'image d'arrière-plan par rapport au bord supérieur de la couche de positionnement d'arrière-plan. |
| percentage | Spécifie le décalage vertical de l'image d'arrière-plan par rapport au conteneur. 0% aligne le bord supérieur de l'image d'arrière-plan 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 | Définit la propriété sur sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle est la fonction de la propriété 'background-position-y' en CSS ?