CSS Eigenschaft background-size
Beispiel
Geben Sie die Größe eines Hintergrundbildes mit "auto" und in Pixeln an:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die background-size
Eigenschaft gibt die Größe der Hintergrundbilder an.
Es gibt vier verschiedene Syntaxen, die Sie mit dieser Eigenschaft verwenden können: die Schlüsselwortsyntax ("auto", "cover" und "contain"), die Ein-Wert-Syntax (legt die Breite des Bildes fest (Höhe wird zu "auto"), die Zwei-Werte-Syntax (erster Wert: Breite des Bildes, zweiter Wert: Höhe) und die Multiple Background-Syntax (durch Komma getrennt).
Standardwert: | Auto |
---|---|
Vererbt: | Nein |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.backgroundSize="60px 120px" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit-, -moz- oder -o- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
CSS-Syntax
background-size: auto|length|cover|contain|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
auto | Default value. The background image is displayed in its original size | |
length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
contain | Resize the background image to make sure the image is fully visible | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Geben Sie die Größe eines Hintergrundbilds in Prozent an:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Beispiel
Geben Sie die Größe eines Hintergrundbilds mit „Cover“ an:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Beispiel
Geben Sie die Größe eines Hintergrundbilds mit "enthalten" an:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Beispiel
Hier haben wir zwei Hintergrundbilder. Die Größe des ersten Hintergrundbildes geben wir mit „contain“ und die des zweiten Hintergrundbildes mit „cover“ an:
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Beispiel
Verwenden Sie verschiedene Hintergrundeigenschaften, um ein „Helden“-Bild zu erstellen:
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Verwandte Seiten
CSS-Tutorial: CSS-Hintergründe
HTML-DOM-Referenz: backgroundSize-Eigenschaft