|
|
Was wollen wir erreichen?
Wir wollen eine Webseite erstellen bei der der Hintergrund folgendes erfüllt:
- Das Hintergrundbild füllt den kompletten Hintergrund aus, ohne weißen Rand oder Wiederholung des Bildes am Rand
- Das Hintergrundbild skaliert sich passend zur Browserfenstergröße
- Das Seitenverhältnis des Hintergrundbildes bleibt erhalten (es wird nicht verzerrt)
- Das Hintergrundbild ist zentriert platziert
- Wenn nicht nötig erscheinen keine Scrolleisten (Scrollbar)
- Die Technik basiert nicht auf Flash, Javascript oder ähnlichem Schickschnack
- Von so vielen Browsern wie nur irgendwie möglich unterstützt (Crossbrowser Compatibility)
Dank der CSS3 Spezifikation (Cascading Style Sheets 3) und simplem HTML geht das ganze recht schnell und einfach, schmerzlos und unkompliziert. Vor CSS3 war das
schon happiger, und benötigte mindestens Javascript, aber nun gehts recht supereasy und ohne nerviges Javascript:
html {
background: url(backgroundimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Du wendest den CSS3 Style am besten auf das pure html Element an und nicht auf das body Element,
da dann das Hintergrundbild auch bei wenig Inhalt über die ganze Seite geht und nicht nur hinter dem bisschen
Inhalt auftaucht.
Ich hoffe, diese Zeile ist nicht nötig, aber ich schreibe es trotzdem mal hier rein: An der Stelle, an der (backgroundimage.jpg) steht, schreibst du
natürlich den Pfad und Namen deines Hintergrundbildes rein (aber trotzdem in Klammern, das ist so bei CSS3), sonst klappt das gar nicht!
Demo
Wenn du gemein bist, oder davon überzeugt bist, dass die Besucher deiner Seite alle Nerds und Hipster sind und immer nur die aktuellsten Browser
benutzen, dann kannst du auch nur die erste und die letzte Zeile benutzen und die browserspezifischen Styles weglassen.
Natürlich sollte es normal (und Pflicht) für jeden Internetnutzer sein, immer die aktuellste Version des Browsers zu nutzen,
aber leider kommt das nicht bei allen Usern an...
Dieser CSS3 Style funktioniert in allen modernen Browsern, wenn du es genau wissen willst, hier ist eine Liste der Browser,
die dynamische Hintergrundbilder im Vollbild skaliert unterstützen:
 Firefox 3.6+ Chrome Opera 10+ IE 9+ (ungetestet in Edge, sollte aber klappen) Safari 3+
Quelle:
Dieser Artikel basiert auf dem englischen Artikel
perfect full background image von css tricks. Dort gibt es noch mehr
Varianten um einen skalierbaren Fullscreen Hintergrund auf einer Webseite hinzubekommen, aber die hier drüber angeführte Methode ist bei weitem die
einfachste. Außerdem gibt es einige haklige Workarounds für ältere Internet Explorer Versionen... aber diese unterstütze ich aus Prinzip nicht um die
Leute dazu zu bringen ein Upgrade vorzunehmen und die riesige Sicherheitslücke, die ihr Browser ist, zu schließen.
Letztes Update: 2016-06-05
|
