- Tuts & Tipps
- Tutorials
- Vollflächige Hintergrundbilder - nur mit CSS
Vollflächige Hintergrundbilder - nur mit CSS
Webseiten mit vollflächigen Hintergrundbildern werden meist mit Hilfe von Flash realisiert, weil es unheimlich “tricky” ist, es allein mit CSS zu realisieren. Chris Coyier hat sich einmal sehr ausführlich mit den Möglichkeiten beschäftigt, dies nur mit CSS zu realisieren und hat es letztendlich mit Hilfe von Doug Neiner geschafft.
Ein deutschsprachiges Tutorial zu dieser sehr interessanten Aufgabenstellung gibt es bisher leider nicht. Also, here it is..
Die Aufgabenstellung
Es soll ein vollflächiges Hintergrundbild (Full Page Background Image) in einer Webseite eingebunden werden ohne überflüssigen Code, und vor allem ohne Layout-Tabelle. Das Hintergrundbild soll nicht nur bei einer Monitorauflösung funktionieren, sondern immer schön mitskalieren. Es soll also auf einem Netbook genauso schön anzusehen sein wie auf einem Apple Cinema Display.
Bisher wurde diese Aufgabenstellung mittels einer Layout-Tabelle wie zu Urzeiten des Internets gelöst. Eine der prominentesten Seiten mit dieser Technik ist sicherlich die folgende:
Die Designangaben für die Tabelle sind zwar im CSS ausgelagert, jedoch bleibt es meiner Meinung nach eine Layout-Tabelle.
Ein besserer Lösungsansatz
Da man ein traditionelles CSS background-image leider niemals dazu bewegen wird, mit der Bildschirmbreite zu skalieren, bleibt nur noch die Möglichkeit, eine inline Grafik zu verwenden. Diese Technik hat sich bis jetzt als Best Practice herausgestellt:
Der nötige Quellcode:
<body>
<img id="background-img" class="hintergrundbild" src="fluss.jpg" alt="" /> <!-- Das eingebundene Hintergrundbild -->
<!-- Der Inhalt der Seite folgt hier --> </body>
Das nötige CSS dafür:
img.hintergrundbild {
min-height: 100%; /* Diese zwei Zeilen setzen die Regeln um den Hintergrund zu füllen */
min-width: 1024px;
width: 100%; /* Die Regeln, welche für die Skalierung sorgen */
height: auto;
position: fixed; /* Die Positionierung */
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) {
img.hintergrundbild {
left: 50%; /* Ohne diese Angaben funktioniert es nicht */
margin-left: -512px; }
}
div#inhalt {
position: relative; /* Diese Angabe ist extrem wichtig, da ansonsten der Inhalt nicht angezeigt wird! */
}
Das Ergebnis unserer Arbeit:
Einschränkungen und bekannte Bugs
Eine Webseite mit dieser Technik validiert nur als XHTML 1.0 Transitional, weil die Grafik nur als reiner img Tag eingefügt werden muß. Wir erinnern uns: in Version Strict muß ein img Tag in einen Paragraphen <p> eingeschlossen werden. Alle Browser stellen es soweit korrekt dar, bis auf unseren “Freund” den IE 6.
Falls jemand eine bessere Technik kennt, bitte gerne bei mir melden oder hier in den Kommentaren posten.
Diesen Artikel als PDF Speichern
Wenn Dir dieser Artikel gefallen hat, teile ihn bitte
Andreas Hecht ist Gründer und CEO des Startups Hecht MediaArts Webdesign und Systemadministrator mit den folgenden Microsoft Zertifizierungen: MCP, MCSA, MCSA Messaging, MCSE, MCTS und dem Cisco CCNA Zertifikat.
Website RevolutionThemes - Premium WordPress Themes | Folge ihm auf Twitter
Danke, dass Du diese Seite ausgedruckt hast! Bitte besuche uns gerne wieder, um weitere hilfreiche Artikel zu lesen.
© 2010 - 2011 Tuts & Tipps - All Rights Reserved. | 