CSS background-position-x Eigenschaft
Die CSS-Eigenschaft background-position-x legt die horizontale Position eines Hintergrundbilds fest. Syntax und Beispiele.
Die Eigenschaft background-position-x legt die horizontale (x-Achsen-)Position eines Hintergrundbilds innerhalb seines Elements fest. Sie ist das Gegenstück zu background-position-y, das die vertikale Position steuert. Zusammen bilden sie die Langform der Kurzschreibweise background-position.
Standardmäßig wird ein background-image in der oberen linken Ecke des Elements positioniert und – sofern background-repeat nicht geändert wird – über das gesamte Element gekachelt. Mit background-position-x können Sie das Bild nach links oder rechts verschieben, ohne seine vertikale Position zu beeinflussen.
Wenn ein Element mehr als ein Hintergrundbild hat, können Sie background-position-x eine kommagetrennte Liste übergeben – einen Wert pro Ebene, in derselben Reihenfolge, in der die Bilder aufgelistet sind:
/* two background layers, each positioned independently on the x-axis */
background-position-x: left, 20%;Diese Seite behandelt die Syntax, alle zulässigen Werte, die Messung von Prozentwerten und Längenangaben sowie ausführbare Beispiele.
Hinweis
In modernem CSS ist es in der Regel klarer, die Kurzschreibweise
background-positionzu verwenden, die beide Achsen gleichzeitig setzt.background-position-xist am nützlichsten, wenn Sie nur die horizontale Achse animieren oder überschreiben möchten, ohne die vertikale Position zu verändern.
Negative Werte sind gültig — background-position-x: -30px verschiebt das Bild über den linken Rand hinaus.
| Anfangswert | left |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbt | 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 der 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://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 70%;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Ergebnis
Beispiel der 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://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-x;
background-position-x: center;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Beispiel der 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://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: left;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Beispiel der background-position-x Eigenschaft mit dem Wert "length":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 30px;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Messung von Prozentwerten und Längenangaben
Eine häufige Fehlerquelle ist der Unterschied zwischen Prozentwerten und Längenangaben:
- Eine Längenangabe (
30px,2rem) versetzt den linken Rand des Bilds vom linken Rand des Positionierungsbereichs um den angegebenen Betrag. - Ein Prozentwert richtet den gleichen relativen Punkt des Bilds am gleichen relativen Punkt des Bereichs aus.
0%bündet die linken Ränder,100%bündet die rechten Ränder, und50%zentriert das Bild. Deshalb verschiebt ein Prozentwert größer als0%das Bild nicht einfach um „so viele Prozent der Breite" – er interpoliert zwischen den beiden Rändern.
Die Schlüsselwörter sind Kurzformen dieser Prozentwerte: left = 0%, center = 50% und right = 100%.
Werte
| Wert | Beschreibung |
|---|---|
| left | Legt die Ausrichtung des linken Rands des Hintergrundbilds am linken Rand der Hintergrundpositionsebene fest. |
| center | Legt die Ausrichtung der Mitte des Hintergrundbilds an der Mitte der Hintergrundpositionsebene fest. |
| right | Legt die Ausrichtung des rechten Rands des Hintergrundbilds am rechten Rand der Hintergrundpositionsebene fest. |
| length | Ein fester Versatz (z. B. 30px oder 2rem) des linken Bildrands vom linken Rand des Positionierungsbereichs. Negative Längen sind erlaubt und verschieben das Bild nach links außerhalb des Bereichs. |
| percentage | Gibt den Versatz der horizontalen Position des Hintergrundbilds relativ zum Container an. 0% richtet den linken Rand des Hintergrundbilds am linken Rand des Containers aus, 100% richtet den rechten Rand am rechten Rand aus, und 50% zentriert das Hintergrundbild horizontal. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Browserunterstützung
background-position-x wird in allen modernen Browsern unterstützt, darunter Chrome, Firefox, Safari und Edge. Die Eigenschaft ist weit verbreitet, wurde jedoch später als die Kurzschreibweise background-position standardisiert. Verwenden Sie daher bevorzugt die Kurzschreibweise, wenn Sie beide Achsen setzen möchten, und greifen Sie nur auf die Langform zurück, wenn Sie die horizontale Achse gezielt steuern oder animieren möchten.
Verwandte Eigenschaften
background-position— die Kurzschreibweise, die beide Achsen gleichzeitig setzt.background-position-y— das vertikale Gegenstück zu dieser Eigenschaft.background-image— definiert das zu positionierende Bild.background-repeat— steuert, ob und wie das Bild gekachelt wird.