Ein Webesign Trend, sind Bilder als Hintergründe für einen Webauftritt. Allerdings traten bisher doch einige Probleme auf, denn je nach Auflösung des Bildschirmes und je nach verwendetem Medium, war das Ergebnis immer ein anderes.

Seit der Einführung von CSS3 gibt es allerdings einen ganz einfachen Ansatz, der auf jedem nur erdenklichen Medium „ greift“.

FEATURES :

• füllt die gesamte Seite mit dem Hintergrundbild, kein „whitespace“
• skaliert das Hintergrundbild
• zentriert es in der Mitte
• Aspect ratio ( Bildproportionen ) bleiben erhalten
• ohne Auftreten von Scrollbars

Dank der CSS Eigenschaft background-size  ist es möglich, das mit reinem CSS umzusetzen. Man verwendet das html-Element dazu, besser wie das body-Element. Ich habe noch background-attachment: fixed; genommen. So scrollt nur die Seite über das Hintergrundbild.
Zur Bildgröße: hier 1800 x 1500 px

CSS :

html {
background: url(images/lilie2.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

FUNKTIONIERT IN :

• Firefox
• Chrome
• IE Explorer 9+
• Safari
• Opera

QUELLE :  css-tricks.com

FAZIT :   Wer seine Homepage mit einem schönen FullPage Hintergrund verschönern möchte, der hat mit CSS3 jetzt eine einfach Möglichkeit. Geht in allen aktuellen Browsern.