CSS/Eigenschaften/background-position

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft background-position bestimmt, an welcher Stelle sich eine bestimmte Ecke des Hintergrundbildes befinden soll, in Bezug auf die gleiche Ecke des Elements, in dem sich das Hintergrundbild befindet. Standardmäßig wird die linke, obere Ecke verwendet. Wird ein Schlüsselwort wie right, center oder bottom verwendet, ändert sich der Bezugspunkt.

Die erlaubten Werte bestehen aus einer Angabe für die X-Ausrichtung und einer Angabe für die Y-Ausrichtung. Die Ausrichtung kann durch ein Schlüsselwort angegeben werden, oder durch eine Längen- oder Prozentangabe.

  • Wird eine der beiden Ausrichtungen durch eine Längen- oder Prozentangabe angegeben, muss die X-Ausrichtung als erstes genannt werden.
  • Wird nur eine Ausrichtung als Längen- oder Prozentangabe angegeben, ist es die X-Ausrichtung. Die Y-Ausrichtung ist dann center
  • Werden beide Ausrichtungen als Schlüsselwort angegeben, kann optional (außer bei center) ein Offset hinzugefügt werden. Da die Schlüsselworte für X- und Y-Ausrichtung unterschiedlich sind, ist die Reihenfolge hier frei.
  • Wird das Schlüsselwort center verwendet, ist der Bezugspunkt nicht mehr eine Ecke, sondern der Mittelpunkt der Seite, entlang der ausgerichtet wird.

Prozentwerte beziehen sich auf die Differenz zwischen Element- und Bildbreite. Ist ein Element beispielsweise 600px breit und das Hintergrundbild 350px, so sind noch 250% zu verteilen. Eine X-Ausrichtung von 70% würde bedeuten, dass 70% dieser 350px links vom Hintergrundbild liegen.

Eine ausführlichere Beschreibung findet sich im unter „Siehe auch“ verlinkten CSS Tutorial.

erlaubte Werte

Positionsangaben als Länge, Prozentwert oder Schlüsselwort

  • left, center oder right für die X-Ausrichtung.
  • top, center oder bottom für die Y-Ausrichtung
  • Vererbung steuernde Werte inherit, initial, unset und revert
  • Defaultwert: 0 0
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung nein
animierbar nein
Beispiel
body {
  background-image: url(...);
  background-position: right;
}
Das Hintergrundbild wird rechtsbündig positioniert.

Weblinks

Siehe auch