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.

Bei mehr als einem Hintergrundbild sitzen die Größenangaben in einer kommagetrennten Liste. background-size ist in allen modernen Browsern implementiert (IE ab Version 10).

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

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
  • background-size: auto setzt das Hintergrundbild auf die Originalgröße
  • background-size: 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.
  • background-size: 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.
  • background-size: 50% 100% rendert das Bild 2x in der Breite des Containers mit 100% Höhe.
    Dazwischen entstehen u.U. Lücken.
  • background-size: 50px auto Hintergrundbild mit 50px in der Breite.
  • background-size: 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 Breite des Hintergrundbildes wird an die Breite des umfassenden Blocks angepasst.
    Das Hintergrundbild wird am unteren Rand u.U. abgeschnitten.
  • Contain Die Höhe des Hintergrundbildes wird an die Höhe des umfassenden Blocks angepasst.
    Dabei wird das Hintergrundbild u.U. auf der rechten Seite abgeschnitten.

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

background-size cover skaliert das Bild horizontal oder vertikal auf die Maße des Blocks und behält dabei das Seitenverhältnis ein. Die Kacheln ("tiles") werden nicht wiederholt.

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