- 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.
Das könnte Dich auch interessieren:
Danke, dass Du diese Seite ausgedruckt hast! Bitte besuche uns gerne wieder, um weitere hilfreiche Artikel zu lesen.
Funktioniert super :-)
Funktioniert – außer wenn man ein anderes div auch noch hat.
Selbst wenn ich dem anderen div “position: relative” gebe wird mir dieses nicht angezeigt.
Hallo Bernhard,
Du musst allen auf dem Hintergrund liegenden DIVs ein
position: relative;zuweisen, dann muss es funktionieren. Funktioniert bei mir selbst bei etlichen DIVs einwandfrei…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. Falls jemand eine bessere Technik kennt, bitte gerne bei mir melden oder hier in den Kommentaren posten.
Ja, steck das <img /> einfach in einen <div></div>
bei aller liebe und allem eifer,
es gibt nun für mivh genau 3 Möglichkeiten.
1tens. Ich verstehe den Script nicht so ganz!
2tens. Dieser Script geht nicht mit Java daten (Bin da auch nicht der top mann.
oder
3tens. Ich bin einfach nur sau dumm.
Bitte um hilfe und verbleibe in großer hoffnung
Hallo Tobias,
Wenn Du um eine kleine Hilfestellung bittest, solltest Du auch Dein Problem sehr genau beschreiben. Erst dann haben andere die Möglichkeit, Dir helfen zu können.