CSS background-position Eigenschaft
Die CSS background-position Eigenschaft legt die Startposition eines Hintergrundbildes fest. Beispiele und zum Ausprobieren.
Die CSS-Eigenschaft background-position legt die Startposition eines Hintergrundbildes innerhalb seines Elements fest. Sie steuert, wo das Bild verankert wird — zum Beispiel in einer Ecke, zentriert oder um einen festen Abstand von einer Kante verschoben.
Diese Seite behandelt die Schlüsselwort-, Prozent- und Längensyntax, den wichtigen Unterschied zwischen Prozent- und Längenangaben, kantenrelative Versätze (die Vier-Wert-Syntax), die Positionierung mehrerer Hintergrundbilder und die häufigsten Fehler.
Standardmäßig ist der Wert 0% 0%, was das Bild in der oberen linken Ecke des Elements platziert. Wenn der Hintergrund auf repeat gesetzt ist, kachelt er vom Ankerpunkt ausgehend horizontal und vertikal.
| Anfangswert | 0% 0% |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbung | Nein. |
| Animierbar | Ja. Die Position kann geändert werden. |
| Version | CSS1 |
| DOM-Syntax | object.style.backgroundPosition = "center"; |
Syntax
Syntax der CSS background-position Eigenschaft
background-position: value;Es kann ein oder zwei Werte angegeben werden:
/* One value — the second axis defaults to center */
background-position: right; /* same as: right center */
/* Two values — horizontal first, then vertical */
background-position: left top;
background-position: 50% 25%;
background-position: 20px 100px;
/* Four values — offset from a named edge */
background-position: right 20px bottom 10px;Prozentangaben vs. Längenangaben
Dies ist das Detail, das die meisten Menschen verwirrt. Ein Prozentwert richtet denselben Prozentwert des Bildes an demselben Punkt des Containers aus, während eine Längenangabe (px, em usw.) den Abstand zwischen den oberen linken Ecken misst.
background-position: 100% 100%platziert die untere rechte Ecke des Bildes an der unteren rechten Ecke des Containers — das gesamte Bild bleibt sichtbar.background-position: 50% 50%(entsprichtcenter center) zentriert das Bild unabhängig von seiner Größe.background-position: 20px 0verschiebt das Bild einfach 20px nach rechts von der oberen linken Ecke; der Versatz ist unabhängig von der Bildgröße.
Prozentangaben eignen sich also am besten für „an einer Kante verankern oder zentrieren", während Längenangaben ideal sind, um das Bild um einen festen Betrag zu verschieben.
Beispiel der background-position Eigenschaft:
Beispiel der CSS background-position Eigenschaft mit Standardwert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 102px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned at the left-top corner of the element.</p>
</body>
</html>Ergebnis
Beispiel der background-position Eigenschaft mit Prozentangaben:
Beispiel der CSS background-position Eigenschaft mit % (Prozent)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 15%;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>
The background-image is positioned 50% from the left side and 15% from the top side of the element.
</p>
</body>
</html>Beispiel der background-position Eigenschaft in Pixeln:
Beispiel der CSS background-position Eigenschaft mit px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 100px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-attachment: fixed;
background-position: 5px 50px;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>
The background-image is positioned 5px from the left, and 50px down from the top.
</p>
</body>
</html>Beispiel der background-position Eigenschaft mit dem Wert "right 100px":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 100px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right 100px;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned 100px from the right edge, vertically centered.</p>
</body>
</html>Beispiel der background-position Eigenschaft mit dem Wert "center center":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 102px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-attachment: fixed;
background-position: center center;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned center.</p>
</body>
</html>Versatz von einer bestimmten Kante
Die Drei- und Vier-Wert-Syntax ermöglicht es, das Bild von einer benannten Kante statt von der oberen linken Ecke zu versetzen. Jede Längenangabe folgt dem Schlüsselwort, das die Kante benennt, von der aus gemessen wird:
/* 30px in from the right edge, 10px down from the top edge */
background-position: right 30px top 10px;Dies ist weit klarer als der Versuch, dasselbe mit Prozentangaben auszudrücken, und der Versatz bleibt konstant, auch wenn der Container seine Größe ändert. Es wird von allen modernen Browsern (und Internet Explorer 9+) unterstützt.
Positionierung mehrerer Hintergrundbilder
Wenn ein Element mehrere Hintergrundbilder hat, wird jedem eine eigene Position in einer durch Komma getrennten Liste zugewiesen. Die Reihenfolge der Positionen entspricht der Reihenfolge der Bilder:
.banner {
background-image: url("logo.png"), url("pattern.png");
background-repeat: no-repeat, repeat;
background-position: right top, left top;
}Hier befindet sich das Logo in der oberen rechten Ecke, während das sich wiederholende Muster oben links beginnt.
Häufige Fehler
- Falsche Achsenreihenfolge. Der erste Wert ist immer horizontal, der zweite vertikal —
background-position: 30px 80pxbedeutet 30px von links, nicht von oben. background-repeat: no-repeatvergessen. Wenn das Bild gekachelt wird, legt die Position nur fest, wo die erste Kachel beginnt, sodass der Effekt oft unsichtbar ist.- Prozent mit Längenangaben verwechseln.
50%zentriert das Bild;50pxist ein fester Versatz von der Ecke (siehe Abschnitt oben). - Einheiten in einem einzigen Wertepaar zu mischen ist erlaubt —
background-position: center 20pxist gültig und nützlich.
Verwandte Eigenschaften
- background-image — legt das positionierte Bild fest.
- background-repeat — steuert die Kachelung, die mit dem Ankerpunkt interagiert.
- background-size — die Skalierung des Bildes beeinflusst, wie Prozentpositionen aufgelöst werden.
- background-attachment — ob das Bild mit der Seite scrollt oder fest bleibt.
- background-color — die Fallback-Farbe, die dort angezeigt wird, wo das Bild nicht abdeckt.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
left, center, right, top, bottom | Legt die Position des Hintergrundbildes fest. Wenn nur ein Wert angegeben wird, ist der andere standardmäßig center. | Ausprobieren » |
x% y% | Der erste Wert legt die horizontale Position fest, der zweite die vertikale. 0% 0% ist die obere linke Ecke. 100% 100% ist die untere rechte Ecke. Wenn nur ein Wert angegeben wird, ist der andere standardmäßig 50%. | Ausprobieren » |
xpos ypos | Der erste Wert legt die horizontale Position fest, der zweite die vertikale. Einheiten können Pixel sein (z. B. 0px 0px). | Ausprobieren » |
initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
inherit | Erbt die Eigenschaft vom übergeordneten Element. |