Hintergrundbild mit background-size skalieren

Wenn man einem HTML-Element ein Hintergrundbild zuweist, dann wird es in der Standardeinstellung mit der Originalgröße des Bildes gekachelt. Man kann die Größe des Hintergrundbildes auch beeinflussen und dafür sorgen, dass es skaliert wird.

Hintergrundbild skalieren mit background-size

Die Skalierung des Hintergrundbildes erfolgt mit der Eigenschaft background-size und mit einem Wertepaar kann die Größe angegeben werden. Der 1. Wert gilt für die Breite des Bildes und der 2. Wert für die Höhe. Nachfolgend ist die Abbildung eines Beispiels, aus dem die Syntax ersichtlich ist.

Werte für background-size

Das Standard-Wertepaar ist auto auto und das bewirkt, dass der Browser die Größe automatisch berechnet und dabei von der Originalgröße ausgeht. Es ist auch möglich, nur einen Wert anzugeben. In dem Fall gilt der Wert für die Breite und für die Höhe wird der Wert auf auto gesetzt. Das bewirkt, dass die Höhe automatisch proportional skaliert wird. Die Größe kann sowohl numerisch mit einer Einheit, als auch mit Keyword-Werten angegeben werden.

Numerische Werte mit Einheit

<Zahl>px (Pixel)
<Zahl>% (Prozentuale Angabe, bezieht sich auf die Höhe und Breite 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

auto (Standardwert, automatische Berechnung durch Browser)
cover (Bild wird soweit wie möglich skaliert, bei der die Breite oder Höhe 1x in das Element passt)
contain (Bild wird soweit wie nötig skaliert, bei der die Breite oder Höhe 1x in das Element passt)
initial (Setzt auf den Standardwert)
inherit (Geerbt vom Elternelement)

Nachfolgend sind ein paar Codebeispiele mit den dazugehörigen Abbildungen, so wie sie sich im Browser auswirken.

Wertepaar 100% 100% und 50% 50%

.selektor1 {
background-image: url(bild.jpg);
background-size: 100% 100%;
}

.selektor2 {
background-image: url(bild.jpg);
background-size: 50% 50%;
}

Werte cover und contain

.selektor1 {
background-image: url(bild.jpg);
background-size: cover;
}

.selektor2 {
background-image: url(bild.jpg);
background-size: contain;
}

Mit nur einem Wert, vergrößert oder verkleinert

.selektor1 {
background-image: url(bild.jpg);
background-size: 200px;
}

.selektor2 {
background-image: url(bild.jpg);
background-size: 30px;
}

Das sind nur einige Beispiele und daneben gibt es natürlich noch eine Reihe weiterer Möglichkeiten.