CSS3 background-size Property

Geben Sie die Größe eines Hintergrundbildes:

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

Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.

Definition und Verwendung

Der Hintergrund-size-Eigenschaft gibt die Größe der Hintergrundbilder.

Standardwert:	auto
Vererbt:	no
Anima:	yes. Read about animatable Try it
Version:	CSS3
JavaScript-Syntax:	object .style.backgroundSize="60px 120px" Try it

Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.

Zahlen, gefolgt von -webkit-, -moz- oder -o- die erste Version an, die mit einem Präfix gearbeitet.

Eigentum
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10,0 -o-

Wert	Beschreibung	Spiel es
auto	Standardwert. Der Hintergrund-Bild enthält, dessen Breite und Höhe	Spiel es "
length	Wird die Breite und Höhe des Hintergrundbildes. Der erste Wert legt die Breite, der zweite Wert die Höhe einstellt. Wenn nur ein Wert angegeben ist, wird die zweite zu setzen "auto"	Spiel es "
percentage	Legt die Breite und Höhe des Hintergrundbildes in Prozent des übergeordneten Elements. Der erste Wert legt die Breite, der zweite Wert die Höhe einstellt. Wenn nur ein Wert angegeben ist, wird die zweite zu setzen "auto"	Spiel es "
cover	Maßstabs das Hintergrundbild so groß wie möglich sein, so dass der Hintergrundbereich vollständig von dem Hintergrundbild überdeckt ist. Einige Teile des Hintergrundbildes kann nicht im Hintergrund Positionierung Bereich im Hinblick auf sein	Spiel es "
contain	Skalieren Sie das Bild auf die größte Größe, so dass sowohl seine Breite und Höhe innerhalb des Content-Bereich passen	Spiel es "
initial	Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs	Spiel es "
inherit	Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben

Dehnen Sie das Hintergrundbild auf den Inhalt Bereich abdecken:

div {
    background: url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Dehnen Sie das Hintergrundbild, so dass genau vier Kopien horizontal passen:

div {
background: url(w3css.gif);
background-size: 25%;
}