CSS-background-size-Eigenschaft

Definition und Verwendung

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

Definieren 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	Testen
length	Stellen Sie die Höhe und Breite des Hintergrundbildes ein. Der erste Wert setzt die Breite fest, der zweite Wert die Höhe. Wenn nur ein Wert eingestellt wird, wird der zweite Wert auf "auto" gesetzt.	Testen
percentage	Stellen Sie die Breite und Höhe des Hintergrundbildes in Prozent des übergeordneten Elements ein. Der erste Wert setzt die Breite fest, der zweite Wert die Höhe. Wenn nur ein Wert eingestellt wird, wird der zweite Wert auf "auto" gesetzt.	Testen
cover	Erweitern Sie das Hintergrundbild so groß, dass es den Hintergrundbereich vollständig überdeckt. Einige Teile des Hintergrundbildes können möglicherweise nicht im Hintergrundpositionsbereich angezeigt werden.	Testen
contain	Erweitern Sie das Bild auf die größtmögliche Größe, um sicherzustellen, dass die Breite und Höhe vollständig dem Inhaltsbereich angepasst sind.	Testen

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

Strecken Sie das Hintergrundbild aus: Strecken Sie das Hintergrundbild aus, um es vollständig den Inhaltsbereich zu überdecken.
Strecken Sie das Hintergrundbild aus, um es viermal horizontal zu kopieren: Strecken Sie das Hintergrundbild aus, um sicherzustellen, dass das Hintergrundbild genau viermal horizontal kopiert wird.

Die Zahlen in der Tabelle geben die erste Browser-Version an, 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-