Die background-size CSS Eigenschaft ermöglicht es, die Größe von Hintergrundbildern einzustellen, anstatt das voreingestellte Verhalten, das Bild auf die volle Größe zu kacheln, zu verwenden.Man kann das Bild nach Wunsch nach oben oder unten skalieren.
Kacheln eines großen Bildes
Nehmen wir ein großes Bild, ein 2982x2808 Firefox Logo. Wir wollen (auch wenn das höchstwahrscheinlichst ein grauenhaft schlechtes Seitendesign ergibt) vier Kopien dieses Bildes in ein 300x300 Pixel Quadrat kacheln, damit es so aussieht:
Das wird erreicht, indem wir folgendes CSS verwenden:
.square {
width: 300px;
height: 300px;
background-image: url(firefox_logo.png);
border: solid 2px;
text-shadow: white 0px 0px 2px;
font-size: 16px;
background-size: 150px;
}
Man braucht für background-size kein Präfix mehr zu setzen, jedoch können Präfix-Versionen hinzugefügt werden, wenn ältere Browser angesprochen werden sollen.
Dehnen eines Bildes
Sowohl die horizontale als auch die vertikale Größe des Bildes kann angegeben werden, wie hier angegeben:
background-size: 300px 150px;
So sieht das Ergebnis aus:
Hochskalieren eines Bildes
Auf der anderen Seite des Spektrums kann ein Bild im Hintergrund auch hochskaliert werden. Hier wird ein 32x32 Pixel favicon auf 300x300 Pixel skaliert:
.square2 {
width: 300px;
height: 300px;
background-image: url(favicon.png);
background-size: 300px;
border: solid 2px;
text-shadow: white 0px 0px 2px;
font-size: 16px;
}
Wie man sehen kann, ist das CSS im Grunde identisch, außer dem Namen der Bilddatei.
Spezielle Werte: "contain" und "cover"
Neben den <length> Werten, bietet die background-size CSS Eigenschaft zwei spezielle Werte für Größen, contain und cover. Sehen wir uns diese an.
contain
Der contain Wert spezifiziert, unabhängig von der Größe der umgebenden Box, die Skalierung des Hintergrundbildes so, dass jede Seite so breit als irgend möglich angezeigt wird ohne über die Länge der korrespondierenden Seite des Containers hinauszugehen. Versuche mit einem Browser, der skalierende Hintergründe unterstützt (wie z. B. Firefox 3.6 oder höher), dieses Fenster in der Größe zu verändern, um das Verhalten am untenstehenden Live-Beispiel zu sehen.
<div class="bgSizeContain"> <p>Try resizing this window and see what happens.</p> </div>
.bgSizeContain {
height: 200px;
background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
background-size: contain;
border: 2px solid darkgray;
color: #000; text-shadow: 1px 1px 0 #fff;
}
cover
Der cover Wert spezifizert, dass das Hintergundbild in der Größe so angezeigt wird, dass es selbst so klein als möglich ist, dabei aber auf alle Fälle in beiden Dimensionen größer oder gleich der jeweiligen korresponierenden Maße des Containers ist.
Das Beispiel verwendet folgendes HTML & CSS:
<div class="bgSizeCover"> <p>Try resizing this window and see what happens.</p> </div>
.bgSizeCover {
height: 200px;
background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
background-size: cover;
border: 2px solid darkgray;
color: #000; text-shadow: 1px 1px 0 #fff;