Ein Webesign Trend sind Voll – Bildschirm – Bilder als Hintergründe für einen Webauftritt.
Seit der Einführung von CSS3 gibt es einen einfachen Ansatz.
Dank der CSS Eigenschaft background-size ist es möglich, das mit reinem CSS auf dem html – Element umzusetzen.
Mit background-attachment: fixed; wird erreicht, dass nur die Seite über das Hintergrundbild scrollt.
Das Bild sollte entsprechend gross sein.
CSS :html {
background: url(images/full_bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
Ergebnis :
füllt die gesamte Seite mit dem Hintergrundbild
skaliert das Hintergrundbild und zentriert es in der Mitte
die Bildproportionen bleiben erhalten und es erscheinenkeine Scrollbars