Zum Inhalt springen

background-position

  • Redaktion 
  • Zuletzt aktualisiert am

#background-position

Bestimmt die Position des Hintergrundbildes.

default background-position: 0% 0%;

Das Hintergrundbild wird bei 0% auf der horizontalen Achse und 0% auf der vertikalen Achse positioniert, d.h. in der linken oberen Ecke des Elements.

background-position: bottom right;

Sie können eine Kombination von Positionsschlüsselwörtern verwenden: center, top, bottom, left and right.

background-position: center center;

Das Hintergrundbild wird in der Mitte des Elements positioniert.

Die CSS-Eigenschaft background-position legt die Anfangsposition eines Hintergrundbildes fest, relativ zu dem Element, auf das es angewendet wird. Sie wird verwendet, um die Position des Hintergrundbildes auf einem Element festzulegen. Diese Eigenschaft kann entweder einen oder zwei Werte annehmen, je nachdem, ob das Bild horizontal oder sowohl horizontal als auch vertikal positioniert werden soll.

  • Es wird verwendet, um ein Hintergrundbild innerhalb der Grenzen eines Elements zu positionieren.
  • Die Eigenschaft kann entweder einen oder zwei Werte annehmen, je nachdem, ob das Bild horizontal, vertikal oder beides positioniert werden soll.
  • Die beiden möglichen Werte für background-position sind Längenwerte und Schlüsselwörter. Längenwerte können in jeder CSS-Längeneinheit (px, em usw.) angegeben werden, während Schlüsselwörter die Position des Hintergrundbildes mit Begriffen wie „top“, „left“, „center“ usw. angeben.
  • Die Eigenschaft background-position kann in Verbindung mit der Eigenschaft background-repeat verwendet werden, um ein gekacheltes Hintergrundbild zu erstellen, das sich entweder horizontal, vertikal oder in beide Richtungen wiederholt.
  • Standardmäßig ist die Eigenschaft background-position auf 0% 0% eingestellt, wodurch das Hintergrundbild an der linken oberen Ecke des Elements positioniert wird.
  • Die Eigenschaft background-position ist Teil des CSS Backgrounds and Borders Module Level 3 und wird von allen modernen Browsern unterstützt.