Vollbild-Hintergrundbild – mit CSS3 ein wahres Kinderspiel
{facebook-share}
Das Ziel ist einfach: das Hintergrundbild einer Webseite soll zu jeder Zeit über die komplette Größe des Browserfensters angezeigt werden. Dabei soll sich die Grafik
- permanent der jeweiligen Fenstergröße anpassen,
- stets zentriert sein und
- natürlich die korrekten Proportionen beibehalten.
Selbstverständlich sollen auch keine Scrollbalken angezeigt werden, und alles ohne Flash oder JavaScript möglich sein.
Mit CSS3 ein Kinderspiel
All das können wir ausschließlich durch CSS erreichen. Dank einer einzigen Eigenschaft, die uns seit CSS3 zur Verfügung steht: background-size
Das Hintergrundbild weisen wir direkt dem html-Element zu (das eignet sich besser als das body-Element, da es immer wenigstens genauso hoch ist, wie das Browserfenster). Der Hintergrund wird fixed und zentriert eingestellt. Mittels background-size: cover; wird die Größe angepasst.
html {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Das ganz funktioniert in:
- Safari (ab Version 3)
- Firefox (ab Version 3.6)
- Internet Explorer (ab Version 9)
- Chrome (schon immer)
4trzrtz