background-position

Die CSS-Eigenschaft background-position ermöglicht es Ihnen, ein Hintergrundbild (oder einen Farbverlauf) innerhalb seines Containers zu verschieben.

html {
  background-position: 100px 5px; 
}

Es gibt drei verschiedene Arten von Werten

• Längenwerte (z. B. 100px 5px)
• Prozentwerte (z. B. 100% 5%)
• Schlüsselwörter (z. B. top right)

Die Standardwerte sind 0 0. Dies platziert Ihr Hintergrundbild oben links im Container.

Längenwerte sind ziemlich einfach: Der erste Wert ist die horizontale Position, der zweite Wert ist die vertikale Position. Also verschiebt 100px 5px das Bild um 100 Pixel nach rechts und fünf Pixel nach unten. Sie können Längenwerte in px, em oder einer beliebigen anderen CSS-Längeneinheit angeben.

Prozentwerte funktionieren etwas anders. Holen Sie Ihre Mathe-Hüte heraus: Das Verschieben eines Hintergrundbilds um X % bedeutet, dass der X %-Punkt im Bild mit dem X %-Punkt im Container ausgerichtet wird. Zum Beispiel bedeutet 50%, dass die Mitte des Bildes mit der Mitte des Containers ausgerichtet wird. 100% bedeutet, dass das letzte Pixel des Bildes mit dem letzten Pixel des Containers ausgerichtet wird und so weiter.

Schlüsselwörter sind lediglich Kurzformen für Prozentwerte. Es ist einfacher, sich top right zu merken und zu schreiben als 0 100%, und deshalb gibt es Schlüsselwörter. Hier ist eine Liste aller fünf Schlüsselwörter und ihrer äquivalenten Werte

• top: 0% vertikal
• right: 100% horizontal
• bottom: 100% vertikal
• left: 0% horizontal
• center: 50% horizontal, wenn horizontal noch nicht definiert ist. Wenn doch, wird dies vertikal angewendet.

Es ist interessant festzustellen, dass die Reihenfolge der Schlüsselwörter keine Rolle spielt: top center ist dasselbe wie center top. Dies funktioniert jedoch nur, wenn Sie *ausschließlich* Schlüsselwörter verwenden. center 10% ist nicht dasselbe wie 10% center.

Demo

Diese Demo zeigt Beispiele für background-position, die mit Längeneinheiten, Prozentwerten und Schlüsselwörtern eingestellt sind.

Werte deklarieren

In modernen Browsern können Sie background-position bis zu vier Werte zuweisen

• Wenn Sie **einen Wert** deklarieren, ist dieser Wert der horizontale Offset. Der Browser setzt den vertikalen Offset auf center.
• Wenn Sie **zwei Werte** deklarieren, ist der erste Wert der horizontale Offset und der zweite Wert der vertikale Offset.

Die Dinge werden etwas kniffliger, wenn Sie drei oder vier Werte verwenden, aber Sie erhalten auch mehr Kontrolle über die Platzierung Ihres Hintergrunds. Eine Drei- oder Vierwert-Syntax wechselt zwischen Schlüsselwörtern und Längen- oder Prozentwerten. Sie können alle Schlüsselwortwerte *außer* center in einer Drei- oder Vierwert-background-position-Deklaration verwenden.

Wenn Sie **drei Werte** angeben, interpretiert der Browser den „fehlenden“ vierten Wert als 0. Hier ist ein Beispiel für ein Drei-Wert-background-position

.three-values {
  background-position: right 45px bottom;
}

Dies positioniert das Hintergrundbild 45px vom rechten und 0px vom unteren Rand des Containers.

Hier ist ein Beispiel für ein **Vier-Wert**-background-position

.four-values {
  background-position: right 45px bottom 20px;
}

Dies platziert das Hintergrundbild 45px vom rechten und 20px vom unteren Rand des Containers.

Beachten Sie die Reihenfolge der Werte in den obigen Beispielen: Schlüsselwörter gefolgt von Längeneinheiten. Ein Drei- oder Vier-Wert-background-position muss diesem Format folgen, wobei ein Schlüsselwort einer Länge oder einem Prozentwert vorausgeht.

Demo

Diese Demo enthält Beispiele für background-position mit einem Wert, zwei Werten, drei Werten und vier Werten.

Browser-Unterstützung

Die grundlegenden Werte werden überall unterstützt. Die Vier-Wert-Syntax hat diese Unterstützung

Das ist dasselbe Maß an Unterstützung wie die Eigenschaften background-position-x und background-position-y.

Weitere Informationen

Verwandt