CSS background-position-y Eigenschaft
Die CSS-Eigenschaft background-position-y legt die vertikale Position eines Hintergrundbilds fest. Beispiele und Live-Demo.
Die CSS-Eigenschaft background-position-y legt die vertikale Position eines Hintergrundbilds innerhalb seines Elements fest. Sie ist die vertikale Hälfte der Kurzschreibweise background-position: Während background-position sowohl einen horizontalen als auch einen vertikalen Wert annimmt, steuert background-position-y ausschließlich die Positionierung nach oben und unten — die horizontale Positionierung übernimmt background-position-x.
Diese Eigenschaft kommt zum Einsatz, wenn ein Hintergrundbild vertikal verschoben werden soll, ohne dabei den horizontalen Wert neu deklarieren zu müssen — zum Beispiel, um ein Wasserzeichen am unteren Rand eines Hero-Bereichs zu fixieren oder um den Startpunkt eines Musters fein abzustimmen. Wenn ein Element mehrere Hintergrundbilder hat, kann für jede Ebene ein eigener Wert angegeben werden, getrennt durch Kommas; jeder Wert wird dem entsprechenden Bild zugeordnet.
Der vertikale Versatz wird relativ zum Hintergrund-Positionierungsbereich gemessen (standardmäßig die Padding-Box des Elements). Ein Längenwert zählt vom oberen Rand nach unten; ein Prozentwert richtet übereinstimmende Punkte auf dem Bild und im Bereich aneinander aus (siehe Werte weiter unten).
Negative Werte sind gültig — background-position-y: -20px verschiebt das Bild nach oben, über den oberen Rand hinaus.
| Anfangswert | top |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbung | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.backgroundPositionY = "bottom"; |
Syntax
CSS background-position-y Werte
background-position-y: top | center | bottom | length | percentage | initial | inherit;Beispiel der background-position-y Eigenschaft mit dem Wert "top":
CSS background-position-y Code-Beispiel
<!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>Ergebnis
Beispiel der background-position-y Eigenschaft mit dem Wert "bottom":
CSS background-position-y bottom Beispiel
<!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>Beispiel der background-position-y Eigenschaft mit dem Wert "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>Beispiel der background-position-y Eigenschaft mit einem Längenwert:
<!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>Beispiel der background-position-y Eigenschaft mit einem Prozentwert:
Prozentwerte verhalten sich anders als Längenangaben. Bei einem Längenwert wie 90px wird der obere Rand des Bilds 90px unterhalb des oberen Rands des Bereichs platziert. Bei einem Prozentwert wird der Punkt, der N% vom oberen Rand des Bilds entfernt liegt, mit dem Punkt ausgerichtet, der N% vom oberen Rand des Bereichs entfernt liegt — 0% entspricht also top, 100% entspricht bottom und 50% entspricht center. Dadurch bleibt ein überdimensioniertes Bild unabhängig von der Containerhöhe sichtbar.
<!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>Werte
| Wert | Beschreibung |
|---|---|
| top | Richtet den oberen Rand des Hintergrundbilds am oberen Rand des Hintergrund-Positionierungsbereichs aus. |
| center | Richtet die Mitte des Hintergrundbilds an der Mitte des Hintergrund-Positionierungsbereichs aus. |
| bottom | Richtet den unteren Rand des Hintergrundbilds am unteren Rand des Hintergrund-Positionierungsbereichs aus. |
| length | Gibt den vertikalen Versatz des Hintergrundbilds vom oberen Rand des Hintergrund-Positionierungsbereichs an. |
| percentage | Gibt den vertikalen Versatz des Hintergrundbilds relativ zum Container an. 0% richtet den oberen Rand des Hintergrundbilds am oberen Rand des Containers aus, 100% richtet den unteren Rand am unteren Rand aus, und 50% zentriert das Hintergrundbild vertikal. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
background-position— legt die horizontale und vertikale Position gemeinsam in einer Deklaration fest.background-position-x— das horizontale Gegenstück zu dieser Eigenschaft.- CSS3-Eigenschaften — Übersicht der in CSS3 eingeführten Eigenschaften.