Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >background-position

background-position

background-position: <waagerecht> [<senkrecht>] | <Seite> <Abstand> <Seite> <Abstand>

Die Position eines Hintergrundbilds in seinem Bereich. Standard ist die linke obere Ecke; mit center liegt das Bild in der Mitte, mit right 10px bottom 10px 10 px von der rechten unteren Ecke entfernt.

Werte

  • Schlüsselwörter – left, center, right, top, bottom. Ein einzelnes Wort setzt die andere Koordinate auf center.
  • Längen – der Abstand der linken oberen Ecke des Bildes: 20px 10px (waagerecht, senkrecht).
  • Prozent – X% Y% legt den Punkt des Bildes bei X % seiner Breite auf den Punkt des Bereichs bei X % von dessen Breite: 50% ist Mitte auf Mitte, 100% rechter Rand auf rechten Rand.
  • Seite und Abstand – right 10px bottom 20px: Abstände vom rechten und unteren Rand.

Initialwert: 0% 0%. Vererbt: nein. Gilt für: alle Elemente.

Beispiele

Ein verkleinertes Bild in drei Positionen:

<figure><div class="sample"></div><figcaption>0% 0% (Standard)</figcaption></figure>
<figure><div class="sample center"></div><figcaption>center</figcaption></figure>
<figure><div class="sample corner"></div><figcaption>right 8px bottom 8px</figcaption></figure>

figure {
  display: inline-block;
  margin: 0 8px 8px 0;
  vertical-align: top;
}
figcaption { font: 12px/1.6 monospace; }
.sample {
  width: 150px;
  height: 100px;
  border: 1px solid #999;
  background: #eee url(/img/slider.jpg) no-repeat;
  background-size: 60px auto;
}
.center { background-position: center; }
.corner { background-position: right 8px bottom 8px; }
Ergebnis
0% 0% (Standard)
center
right 8px bottom 8px

Worauf Sie achten sollten

  • Prozent sind kein Abstand vom linken Rand: 100% rückt das Bild an den rechten Rand, schiebt es aber nicht hinaus. Ist das Bild so groß wie der Bereich, verschieben Prozent es nicht.
  • Ein einzelnes Schlüsselwort setzt die andere Koordinate auf center: background-position: right liegt rechts und senkrecht in der Mitte.
  • Für eine Koordinate gibt es eigene Eigenschaften background-position-x und background-position-y.
  • Bei background-attachment: fixed wird die Position vom Browserfenster aus berechnet, nicht vom Element.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
background-size
background-origin
background
object-position