Anpassen von Hintergrundbildern mit background-size
Die background-size CSS-Eigenschaft ermöglicht es Ihnen, das Hintergrundbild eines Elements anzupassen. Sie überschreiben das Standardverhalten, das Bild in voller Größe zu kacheln, indem Sie die Breite und/oder Höhe des Bildes angeben. Dadurch können Sie das Bild nach Belieben vergrößern oder verkleinern.
Kacheln 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 Webdesign zusammenhängen) vier Kopien dieses Bildes in ein 300x300-Pixel-Element kacheln. Um dies zu erreichen, können wir einen festen background-size-Wert von 150 Pixel festlegen.
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 sowohl die horizontale als auch die vertikale Größe des Bildes angeben, wie folgt:
background-size: 300px 150px;
Das Ergebnis sieht so aus:
Skalieren eines Bildes nach oben
Am anderen Ende des Spektrums können Sie ein Bild im Hintergrund nach oben skalieren. 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.
Besondere Werte: contain und cover
Zusätzlich zu <length>-Werten bietet die background-size-CSS-Eigenschaft zwei spezielle Größenwerte, contain und cover. Lassen Sie uns diese genauer betrachten.
contain
Der Wert contain gibt an, dass das Hintergrundbild unabhängig von der Größe des umschließenden Kastens 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 untenstehende Beispiel zu skalieren, 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 groß sein soll, dass es so klein wie möglich ist, während es sicherstellt, dass beide Dimensionen größer oder gleich der entsprechenden Größe des Containers sind. Versuchen Sie, das untenstehende Beispiel zu skalieren, 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;
}