Wer kennt es nicht, Webseiten mit einem großen Hintergrund-Bild, welches sich immer an die Größe des Browserfensters anpasst. Ziemlich schick ist das auf jeden Fall, jedoch wird in den meisten Fällen immer ein JavaScript eingesetzt. Da kam mir kurzerhand die Idee, ob man das Ganze nicht auch mit CSS3 lösen kann – und ja, man kann!
Benötigt wird ein simpler CSS3-Zusatz zum Body-Tag, wo auch das Hintergrund-Bild festgelegt wird. Dieses sollte wenn möglich natürlich auch relativ groß sein.
body {
background: url(dein-Bild.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Mit diesem Code im Body erhält man dann den gewünschten Effekt. Ein weiterer Vorteil gegenüber einem JavaScript ist, dass natürlich Javascript bei einigen Besuchern auch deaktiviert sein kann. Was ältere Versionen des Internet Explorers betrifft, sieht es natürlich bei der CSS3-Variante nicht so gut aus. Was einen „Full Screen Background“ mittels JavaScript angeht, empfehle ich das Supersized Script.
