Hintergrundbilder, die das gesamte Browserfester ausfüllen

Hier geht es um Lösungen ohne Einsatz von JavaScript. Zunächst bindet man das Hintergrundbild per CSS in die Seite ein:

background: url(bg.jpg) no-repeat center center fixed;

Dadurch wird das Bild in allem Browsern (einschl. IE6) als feststehender mittig zentrierter Hintergrund eingebunden. Wenn man davon ausgeht, dass ein Browserfenster in der Regel nicht größer als 1900 x 1200 px ist, ist man auf der sicheren Seite, wenn man das Bild in den entsprechenden Maßen zur Verfügung stellt. Ist das Fenster kleiner, ist nur ein Ausschnitt des Bildes zu sehen. Dieser Absatz funktioniert in allen Browsern. Das im Beispiel verwendete Bild ist 1920 x 1200 pixel groß:

Beispiel 1

Will man hingegen das Hintergrundbild der Fenstergröße anpassen oder kein genügend großes Bild einsetzen, so verwendet man die CSS3 Eigenschaft: background-size: cover. Um die „Nicht-IE“ Browser anzusprechen schreibt man folgendes:

background: url(bg.jpg) no-repeat center center fixed;
-moz-background-size: cover;
background-size: cover;

Für den IE8 funktioniert immerhin dieses:

-ms-filter: "progid:DXImageTransform.Microsoft.
   AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";

Allerdigs wird dabei das Bild entsprechend der Größe des Browserfensters verzerrt und bleibt nicht fixiert, was diese Technik im Grunde unbrauchbar macht. Für IE7 und IE6 funktioniert nicht mal das. IE9 versteht hingegen background-size: cover. Das im Beispiel verwendete Bild ist 1024 x 640 pixel groß:

Beispiel 2

Ein anderer Weg ist, das Bild nicht als Hintergrundbild einzubinden, sondern als Image Tag in das HTML. Das funktioniert in allem Browsern außer dem IE6, da dieser kein position:fixed; versteht. Das Beispiel ist – leicht angepasst für den IE6 – der Seite CSS Tricks entnommen. Der Code kann im Quelltext der Beispielseite eingesehen werden. Das im Beispiel verwendete Bild ist 1024 x 640 pixel groß:

Beispiel 3

Links:

http://css-tricks.com/perfect-full-page-background-image
http://www.alistapart.com/articles/supersize-that-background-please
http://www.quirksmode.org/css/background.html

Showcase unterschiedlicher Lösungen, auch solcher mit Javascript:

http://www.august.com.au
http://ringvemedia.com/introduction
http://buildinternet.com/project/supersized
http://www.cadranhotel.com/de
http://code.ttcon.hu/fullscrn/#!/home
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/#demo