CSS background-position-y-Eigenschaft
Die background-position-y-Eigenschaft legt die vertikale Position für jeden Hintergrund fest.
Ein oder mehrere Werte können durch Kommas getrennt angegeben werden.
INFO
Negative Werte sind gültig.
| Anfangswert | top |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbt | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.backgroundPositionY = "bottom"; |
Syntax
CSS background-position-y-Werte
css
background-position-y: top | center | bottom | length | percentage | initial | inherit;Beispiel für die background-position-y-Eigenschaft mit dem Wert „top“:
CSS background-position-y-Codebeispiel
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://de.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>Ergebnis
Beispiel für die background-position-y-Eigenschaft mit dem Wert „bottom“:
CSS background-position-y-Beispiel mit „bottom“
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://de.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>Beispiel für die background-position-y-Eigenschaft mit dem Wert „center“:
Beispiel für die background-position-y-Eigenschaft mit dem Wert „center“:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://de.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>Beispiel für die background-position-y-Eigenschaft mit dem Wert „length“:
Beispiel für die background-position-y-Eigenschaft mit dem Wert „length“:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://de.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>Beispiel für die background-position-y-Eigenschaft mit dem Wert „percentage“:
Beispiel für die background-position-y-Eigenschaft mit dem Wert „percentage“:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://de.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>Werte
| Wert | Beschreibung |
|---|---|
| top | Legt die Ausrichtung der oberen Kante des Hintergrundbilds mit der oberen Kante der Hintergrundpositionsebene fest. |
| center | Legt die Ausrichtung der Mitte des Hintergrundbilds mit der Mitte der Hintergrundpositionsebene fest. |
| bottom | Legt die Ausrichtung der unteren Kante des Hintergrundbilds mit der unteren Kante der Hintergrundpositionsebene fest. |
| length | Legt den vertikalen Versatz des Hintergrundbilds von der oberen Kante der Hintergrundpositionsebene fest. |
| percentage | Legt den vertikalen Versatz des Hintergrundbilds relativ zum Container fest. 0 % richtet die obere Kante des Hintergrundbilds an der oberen Kante des Containers aus, 100 % richtet die untere Kante an der unteren Kante des Containers aus und 50 % zentriert das Hintergrundbild vertikal. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Practice
Was ist die Funktion der 'background-position-y'-Eigenschaft in CSS?