CSS, HTML und Javascript mit {stil}

CSS background-size

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.

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 sind besonders 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.

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).

Zeigt das Verhalten von cover / contain bei unterschiedlichen Seitenverhältnissen
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.

An die breitere Seite angepasst An die schmalere Seite angepasst An die breitere Seite angepasst An die schmalere Seite angepasst