CSS background-size

Feb 2021

background-size skaliert Hintergrundbilder oder passt Hintergrundbilder an die Größe des Viewports an: durch Größenangaben, Prozentwerte oder mit den Schlüsselwörtern contain und cover. Bevor die Browser background-size auf breiter Basis unterstützten, wurden Hintergrundbilder mit ihrer vollen Größe eingesetzt.

background-size Syntax

Hintergrundbilder lassen sich mit vier Schreibweisen einsetzen: mit Schlüsselwörtern, mit einem Wert, mit zwei Werten und mit der Syntax für mehrere Hintergrundbilder.

.slider { 
   background-image: url(overview.jpg);
   background-size: cover;
}

Bei mehr als einem Hintergrundbild sitzen die Größenangaben in einer kommagetrennten Liste.

background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px; // zwei Hintergrundbilder
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;

Browser-Support: Alle modernen Browser (IE ab Version 10).

SVG-Grafik ist besonders gut geeignet als Hintergrundbild, da sich SVG so schön an die Größe des Viewports anpassen lässt. SVG skaliert beliebig ohne Stufen.

background-size: auto

auto setzt das Hintergrundbild auf die Originalgröße
50% skaliert das Bild auf 50% der Breite des umfassenden Containers, so dass es zweimal in der Breite erscheint.
Das Hintergrundbild wird am unteren Rand u.U. abgeschnitten.
25% skaliert das Bild auf 25% der Breite des umfassenden Containers, so dass es viermal in der Breite erscheint.
Das Hintergrundbild wird am unteren Rand u.U. abgeschnitten.
50% 100% rendert das Bild 2x in der Breite des Containers mit 100% Höhe.
Dazwischen entstehen u.U. Lücken.
50px auto Hintergrundbild mit 50px in der Breite.
auto 50% rendert das Hintergrundbild in 50% der Höhe des umfassenden Containers.
Dabei wird das Hintergrundbild u.U. auf der rechten Seite abgeschnitten.
cover Die Größe des Hintergrundbildes wird an breitere Seite des umfassenden Blocks angepasst und dafür u.U. am unteren oder rechten Rand abgeschnitten.
contain Das Hintergrundbild wird in Höhe und Breite skaliert, so dass Beite und Höhe vollständig in das umfassende Element passen.

Beispiele: background-size – Länge, %, contain, cover

background-size: 50px 40px skaliert das Hintergrundbild auf die angegebenen Maße.
background-size: 100% 50% skaliert das Hintergrundbild im Verhältnis zur Größe der Box.
background-size: contain passt die längere Seite des Hintergrundbilds in die Box ein.
background-size: cover passt die kleinere Seite des Hintergrundbilds in die Box ein.
background-size: auto reale Größe des Hintergrundbilds.

Wenn das Bild nicht als Hintergrundbild, sondern mit HTML img eingesetzt wird, bewirkt object-fit mit den Werten cover bzw. fit die gleiche Wirkung: Das Bild wird responsiv angepasst und kann den umfassenden Container mit cover vollständig ausfüllen.

background-size: cover / contain

cover und contain vergrößern oder verkleinern Hintergrundbilder, bis sie das umfassende Element vollständig abdecken. Hat das Hintergrundbild ein anderes Seitenverhältnis als das umfassende Element, liegen bei cover Teile des Bildes außerhalb des sichtbaren Bereichs. contain zeigt das Hintergrundbild vollständig an, aber Teile des umfassenden Elements bleiben leer (background-repeat: no-repeat).

Vergleich cover / contain — Links: background-size: cover
Rechts: background-size: contain

cover ist zusammen mit background-position die Technik für Hintergrundbilder, die auf kleinen Monitoren nicht automatisch herunter skaliert werden, sondern weiterhin den wichtigsten Bildausschnitt detailliert zeigen.

background size Fullscreen

Damit haben wir also das Rüstzeug für ein Fullscreen-Hintergrundbild beisammen. Das Hintergrundbild sollte möglichst quadratisch vorliegen.

Fullscreen background-image mit background size auf Mobile und Desktop

<style>
.fullscreen {
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover; 
   width: 100vw;
   height: 100vh;
   display: flex; 
   justify-content: center; 
   align-items: center;
}
@media (max-width: 1259px) {
   .fullscreen { 
      background-image: url("image-980.jpg"); 
   }
}

@media (min-width:1260px) {
   .fullscreen { 
      background-image: url("image-1960.jpg"); 
   }
}
</style>

Das umfassende DIV-Element mit ist width: 100vw und height: 100vh an die Größe des Monitors angepasst. background-size: cover passt das Hintergrundbild an die breitere Seite des Monitors (eigentlich: des umfassenden Elements) an.

display: flex; justify-content: center; align-items: center; bringen das Label in die vertikale und horizontale Mitte des Screens.

<div class="fullscreen">
   <div class="label">
      Fullscreen
   </div>
</div>

Quelle: Pen von cartuhok