Hintergrundbild an Fenstergröße anpassen

Problem:
Das Hintergrundbild auf einer Webseite soll immer die gesamte Breite und Höhe eines Fensters bei beliebiger Fenstergröße bedecken. Das Bild soll dabei so skaliert werden, dass es nicht verzerrt wird. Je nach Fensterproportion soll vom Bild rechts oder unten ein Bereich abgeschnitten werden.

Lösung:
Die aktuelle Höhe und Breite des Fensters kann mittels JavaScript ermittelt werden. Damit überschüssige Bildbereiche "versteckt" werden können, wird das Hintergrundbild in einen absolut positionierten div gesteckt.

Über das "resize"-Event kann das Bild auch bei sich verändernder Fenstergröße angepasst werden.

Demo:
Ansehen

Kategorien: