Ändern der Größe von Hintergrundbildern mit `background-size`
Die background-size CSS Eigenschaft ermöglicht es Ihnen, die Größe des Hintergrundbildes eines Elements zu ändern, indem sie das Standardverhalten des Kachelns des Bildes in voller Größe überschreibt. Indem Sie die Breite und/oder Höhe des Bildes angeben, können Sie das Bild nach Bedarf vergrößern oder verkleinern.
Kachelung eines großen Bildes
Betrachten wir ein großes Bild, ein 2982x2808 Firefox-Logo. Wir möchten (aus Gründen, die wahrscheinlich mit einem erschreckend schlechten Seitendesign zusammenhängen) vier Kopien dieses Bildes in einem 300x300-Pixel-Element kacheln. Dazu können wir einen festen background-size Wert von 150 Pixeln verwenden.
HTML
<div class="tiledBackground"></div>
CSS
.tiledBackground {
background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
background-size: 150px;
width: 300px;
height: 300px;
border: 2px solid;
color: pink;
}
Ergebnis
Strecken eines Bildes
Sie können auch die horizontale und vertikale Größe des Bildes angeben, wie folgt:
background-size: 300px 150px;
Das Ergebnis sieht so aus:
Vergrößern eines Bildes
Am anderen Ende des Spektrums können Sie ein Bild im Hintergrund vergrößern. Hier skalieren wir ein 32x32 Pixel Favicon auf 300x300 Pixel:
.square2 {
background-image: url("favicon.png");
background-size: 300px;
width: 300px;
height: 300px;
border: 2px solid;
text-shadow: white 0px 0px 2px;
font-size: 16px;
}
Wie Sie sehen können, ist das CSS im Wesentlichen identisch, abgesehen vom Namen der Bilddatei.
Spezielle Werte: contain und cover
Zusätzlich zu <length> Werten bietet die background-size CSS-Eigenschaft zwei spezielle Größenwerte, contain und cover. Schauen wir uns diese an.
contain
Der Wert contain gibt an, dass das Hintergrundbild, unabhängig von der Größe der enthaltenen Box, so skaliert werden soll, dass jede Seite so groß wie möglich ist, ohne die Länge der entsprechenden Seite des Containers zu überschreiten. Versuchen Sie, das folgende Beispiel zu ändern, um dies in Aktion zu sehen.
HTML
<div class="bgSizeContain">
<p>Try resizing this element!</p>
</div>
CSS
.bgSizeContain {
background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
background-size: contain;
width: 160px;
height: 160px;
border: 2px solid;
resize: both;
overflow: scroll;
}
Ergebnis
cover
Der Wert cover gibt an, dass das Hintergrundbild so dimensioniert werden soll, dass es so klein wie möglich ist, während beide Dimensionen größer oder gleich der entsprechenden Größe des Containers sind. Versuchen Sie, das folgende Beispiel zu ändern, um dies in Aktion zu sehen.
HTML
<div class="bgSizeCover">
<p>Try resizing this element!</p>
</div>
CSS
.bgSizeCover {
background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
background-size: cover;
width: 160px;
height: 160px;
border: 2px solid;
resize: both;
overflow: scroll;
}