..
Kategorien

Abonnieren

Newsfeed der Artikel

Newsfeed der Kommentare

Email-Newsletter abonnieren

Follow me on Twitter


Statistiken

Artikel Kommentare
  • Andreas Hecht 10 August, 10:57

    Hallo Tobias, Der Quelltext der Demoseite sollte Dir alles wichtige sagen. Selbstverständlich funktioniert das Ganze auch mit …

  • Tobias 10 August, 07:21

    bei aller liebe und allem eifer, es gibt nun für mivh genau 3 Möglichkeiten. 1tens. Ich verstehe …

  • nik 22 Juni, 00:50

    Eine Webseite mit dieser Technik validiert nur als XHTML 1.0 Transitional, weil die Grafik nur …

  • Andreas Hecht 10 Mai, 12:06

    Hallo Bernhard, Du musst allen auf dem Hintergrund liegenden DIVs ein position: relative; zuweisen, dann muss …

  • Bernhard 9 Mai, 18:59

    Funktioniert – außer wenn man ein anderes div auch noch hat. Selbst wenn ich dem anderen …

Hecht MediaArts - Webdesign & Webdienste

Werbebanner Themeforest

Werbebanner Camping-Angeln.de

Fotolia

Vollflächige Hintergrundbilder - nur mit CSS

By Andreas Hecht
  –   17. Februar 2010  in    

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:

rinvemedia.com

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:

Demoseite

Demoseite ansehen »

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.

Du magst diesen Post?

Dann würde ich mich sehr über Deine Hilfe freuen!

  • Delicious Bookmark this on Delicious
Das könnte Dich auch interessieren:

Danke, dass Du diese Seite ausgedruckt hast! Bitte besuche uns gerne wieder, um weitere hilfreiche Artikel zu lesen.

Kommentare ( 6 )

Deinen Kommentar hinzufügen »
  • 1
    F. 1 Mai, 14:15

    Funktioniert super :-)

  • 2
    Bernhard 9 Mai, 18:59

    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.

  • 3
    Andreas Hecht (Author Comment)10 Mai, 12:06

    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…

  • 4
    nik22 Juni, 00:50

    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>

  • 5
    Tobias10 August, 07:21

    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

  • 6
    Andreas Hecht (Author Comment)10 August, 10:57

    Hallo Tobias,

    • Der Quelltext der Demoseite sollte Dir alles wichtige sagen.
    • Selbstverständlich funktioniert das Ganze auch mit JavaScript. Siehe Hecht MediaArts, die Seite ist mit der Technik umgesetzt.

    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.

Beitrag kommentieren

Textile-Hilfe zur Textstrukturierung.  |  Spam und SEO-Links werden zeitnah gelöscht.

Wichtig: Nach der Vorschau bitte auch den Absenden Button drücken.

  
NACH OBEN
Social Networks
Follow me on Twitter
Wichtiger Hinweis

Alle angebotenen Effekte, Techniken, zum Download angebotenen Grafiken und Tipps dürfen frei und ohne Einschränkungen verwendet werden.

Die Texte, Artikel, Tutorials und Tipps (also die geschrieben Worte), sowie das Layout und die für das Layout dieser Seite verwendeten Grafiken unterliegen jedoch dem © Copyright. Hier gilt: alle Rechte vorbehalten.

Texte dieser Seite (auch Auszugsweise) dürfen nur nach vorheriger schriftlicher Genehmigung des Autors verwendet werden.

Für diese Seite schreiben?

Wenn Du Lust hast, für diese Seite zu schreiben, dann immer her mit einem Artikel oder Tutorial!

Geld winkt keines, aber unendlicher Ruhm, ein Autorenprofil und ein Link auf Homepage und Twitterprofil. Also, trau Dich und schreib was!

Mehr erfahren  »


Logo Tuts & Tipps