hey
backhome
1pixel
Navigation
Mainpage
Techpage
Internet
favicon
firefox
firefox
firefox
firefox
webspace
FSBG
redirect
Computer
adventure engines
csv2txt
GPG4win
primzahlen
Shutdown
Sudoku
text formatierer
Das Ziel
Wie es geht!

Das Ziel

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)





Wie es geht!


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:
  • icon Firefox 3.6+
  • icon Chrome
  • icon Opera 10+
  • icon IE 9+ (ungetestet in Edge, sollte aber klappen)
  • icon 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.







Kommentare

Kein Kommentar

Neuen Kommentar abgeben
Text:
*


Name:
*

Spamschutz: bitte 7948 eintragen
*

web:
 
email:
*
Mail-Adresse verstecken?