CSS background-position-x-Eigenschaft
Die background-position-x-Eigenschaft legt die horizontale Position einer Hintergrundbild-Ebene fest. Es können ein oder mehrere Werte angegeben werden, die durch Kommas getrennt sind.
Standardmäßig wird ein background-image in der oberen linken Ecke des Elements positioniert und sowohl horizontal als auch vertikal wiederholt.
Hinweis
In modernem CSS wird empfohlen, stattdessen die Kurzschreibweise
background-positionzu verwenden, dabackground-position-xselten isoliert genutzt wird.
Info
Negative Werte sind gültig.
| Anfangswert | left |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.backgroundPositionX = "right"; |
Syntax
CSS background-position-x-Werte
background-position-x: left | center | right | length | percentage | initial | inherit;Beispiel zur background-position-x-Eigenschaft:
CSS background-position-x-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://de.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>Ergebnis
Beispiel zur background-position-x-Eigenschaft mit dem Wert „center“:
CSS background-position-x center-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://de.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>Beispiel zur background-position-x-Eigenschaft mit dem Wert „left“:
CSS background-position-x left-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://de.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>Beispiel zur background-position-x-Eigenschaft mit dem Wert „length“:
Beispiel zur background-position-x-Eigenschaft mit dem Wert „length“:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://de.w3docs.com/build/images/w3docs-logo-black.png") repeat-y;
background-position-x: 30px;
}
</style>
</head>
<body>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| left | Legt die Ausrichtung der linken Kante des Hintergrundbilds mit der linken Kante der Hintergrundpositionsebene fest. |
| center | Legt die Ausrichtung der Mitte des Hintergrundbilds mit der Mitte der Hintergrundpositionsebene fest. |
| right | Legt die Ausrichtung der rechten Kante des Hintergrundbilds mit der rechten Kante der Hintergrundpositionsebene fest. |
| length | Legt den Versatz der linken vertikalen Kante des angegebenen Hintergrundbilds von der linken vertikalen Kante der Hintergrundpositionsebene fest. |
| percentage | Legt den Versatz der horizontalen Position des Hintergrundbilds relativ zum Container fest. 0% richtet die linke Kante des Hintergrundbilds an der linken Kante des Containers aus, 100% richtet die rechte Kante des Hintergrundbilds an der rechten Kante des Containers aus und 50% zentriert das Hintergrundbild horizontal. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Praxis
Welche Funktion hat die CSS background-position-x-Eigenschaft?