CSS background-size property

Definition und Verwendung

background-size Die Eigenschaft legt die Größe des Hintergrundbildes fest.

Bestimmen Sie die Größe des Hintergrundbildes:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

background-size: length|percentage|cover|contain;

Wert	Beschreibung	Test
length	Stellen Sie die Höhe und Breite des Hintergrundbildes ein. Der erste Wert legt die Breite fest, der zweite Wert die Höhe. Wenn nur ein Wert eingestellt wird, wird der zweite Wert auf "auto" gesetzt.	Test
percentage	Stellen Sie die Breite und Höhe des Hintergrundbildes in Prozent des übergeordneten Elements ein. Der erste Wert legt die Breite fest, der zweite Wert die Höhe. Wenn nur ein Wert eingestellt wird, wird der zweite Wert auf "auto" gesetzt.	Test
cover	Erweitern Sie das Hintergrundbild auf eine ausreichende Größe, um sicherzustellen, dass das Hintergrundbild vollständig den Hintergrundbereich überdeckt. Einige Teile des Hintergrundbildes können möglicherweise nicht im Hintergrundpositionierungsbereich angezeigt werden.	Test
contain	Erweitern Sie das Bild auf die größtmögliche Größe, um sicherzustellen, dass die Breite und Höhe vollständig dem Inhaltsbereich entsprechen.	Test

Standardwert:	auto
Vererbbarkeit:	nein
Version:	CSS3
JavaScript Syntax:	object.style.backgroundSize="60px 80px"

Ziehen Sie das Hintergrundbild: Ziehen Sie das Hintergrundbild, um das gesamte Inhaltsbereich vollständig zu überdecken.
Ziehen Sie das Hintergrundbild, um das Hintergrundbild viermal horizontal zu kopieren: Ziehen Sie das Hintergrundbild, um sicherzustellen, dass das Hintergrundbild genau viermal horizontal kopiert wird.

Tabellennummern angeben die erste Browserversion, die die Eigenschaft vollständig unterstützt.

Chrome	Edge	Firefox	Safari	Opera
Chrome	IE / Edge	Firefox	Safari	Opera
4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-