Position des Hintergrundbilds festlegen

Wenn man einem Element ein Hintergrundbild zuweist, dann wird standardmäßig mit der oberen linken Ecke begonnen, ab der das Bild gekachelt wird. Man kann die Position bzw. den Bezugspunkt in CSS ändern, ab der das Bild beginnt, die Box in beide Richtungen zu füllen. Auf der folgenden Abbildung wurde beim rechten Beispiel die Position verschoben.

Hintergrundbild-Position verschieben

Um die Start-Position zum Kacheln des Hintergrundbilds zu verschieben, verwendet man die Eigenschaft background-position und kann dabei zwei Werte angeben. Der 1. Wert gilt für die Position auf der x-Achse (horizontal) und der 2. Wert für die y-Achse. Nachfolgend ist ein Beispiel abgebildet, aus dem die Syntax ersichtlich ist.

CSS-Code mit background-position

Werte für background-position

Die beiden Werte können nicht nur in Pixeln angegeben werde, sondern auch mit anderen Längenangaben, die von den Browsern verarbeitet werden können. Außerdem sind auch Keyword-Werte (z.B. left) möglich. Einige mögliche Werte wären wie folgt.

Numerische Werte mit Einheit

  • <Zahl>px (Pixel)
  • <Zahl>% (Prozentuale Angabe, bezieht sich auf die Breite oder Höhe des Elements)
  • <Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
  • <Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
  • <Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
  • <Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
  • <Zahl>vw (1vw entspricht 1% der Anzeigebreite)
  • <Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
  • <Zahl>vmin (der kleinere Wert von vw oder vh)
  • <Zahl>vmax (der größere Wert von vw oder vh)
  • <Zahl>pt (Punkt)
  • <Zahl>pc (Pica)
  • <Zahl>in (Inch)
  • <Zahl>mm (Millimeter)
  • <Zahl>cm (Zentimeter)

Keyword-Werte

  • left (Links)
  • right (Rechts)
  • top (Oben)
  • bottom (Unten)
  • center (Zentriert)

Die Standardeinstellung entspricht dem Wertepaar top left oder 0 0. Man kann numerische Angaben mit Keyword-Werten kombinieren (z.B. right 20%). Negative Werte sind ebenfalls möglich. Wenn man nur einen Wert angibt, gilt für die andere Achse der Wert center. Bei nur einer Längenangabe gilt der Wert für die x-Achse, sodass die y-Achse zentriert wird. Nachfolgend sind ein paar Codebeispiele mit den Abbildungen, wie sie im Browser dargestellt werden.

Wertepaar top left und top right

.selektor1 {
background-image: url(bild.jpg);
background-position: top left;
}

.selektor2 {
background-image: url(bild.jpg);
background-position: top right;
}
background-position: top left und top right

Wertepaar center left und center right

.selektor1 {
background-image: url(bild.jpg);
background-position: center left;
}

.selektor2 {
background-image: url(bild.jpg);
background-position: center right;
}
background-position: center left und center right

Wertepaar bottom left und bottom right

.selektor1 {
background-image: url(bild.jpg);
background-position: bottom left;
}

.selektor2 {
background-image: url(bild.jpg);
background-position: bottom right;
}
background-position: bottom left und bottom right

Wertepaar top center und bottom center

.selektor1 {
background-image: url(bild.jpg);
background-position: top center;
}

.selektor2 {
background-image: url(bild.jpg);
background-position: bottom center;
}
background-position: top center und bottom center

Wert center und in Verbindung mit no-repeat

In Verbindung mit background-repeat: no-repeat; kann man erreichen, dass ein Hintergrundbild genau in der Mitte zentriert wird. Die Wiederholung des Bildes wird mit no-repeat ausgeschaltet.

.selektor1 {
background-image: url(bild.jpg);
background-position: center;
}

.selektor2 {
background-image: url(bild.jpg);
background-position: center;
background-repeat: no-repeat;
}
background-position: center und ohne repeat

Wertepaar center 20% und right 20%

.selektor1 {
background-image: url(bild.jpg);
background-position: center 20%;
}

.selektor2 {
background-image: url(bild.jpg);
background-position: right 20%;
}
background-position: center 20% und right 20%

Neben den gezeigten Beispielen gibt es natürlich noch eine Reihe weiterer Möglichkeiten. Man sollte darauf achten, keine ungültigen Wertepaare anzugeben, z.B. top bottom oder left right. Auch die Reihenfolge muss beachtet werden. Ein Wert wie top 20% ist ungültig, da der 1. Wert für die x-Achse ist, die Angabe top jedoch für die y-Achse gilt.