Hintergrund-Macht

Teil 4: CSS: Tricks mit Hintergrundbildern

Skalieren

Sie können die Position von Hintergrundbildern bestimmen, das Verhalten beim Scrollen und die Art der Wiederholung. Eine Eigenschaft, um die Größe des Hintergrundbildes zu bestimmen, gibt es jedoch leider nicht. Dabei wäre es natürlich sehr schön, wenn man Hintergrundbilder einfügen könnte, die sich immer dynamisch an die Größe des Browserfensters anpassen.

CSS: Tricks mit Hintergrundbildern

© Archiv

Das Hintergrundbild passt sich immer an, egal, ob großes oder kleines Browserfenster.

Es gibt jedoch Tricks, um skalierbare Hintergrundbilder zu simulieren - die aber gerade nicht mit echten Hintergrundbildern arbeiten, sondern normal in HTML eingebundene Bilder verwenden. Wie das geht, zeigt Stu Nichols unter .

Es funktioniert allerdings nur, wenn html und body eine Größe von 100% haben. Darauf wird dann ein Bild absolut positioniert und erhält ebenfalls eine Breite und Höhe von 100%. Auch der eigentliche Inhalt wird absolut positioniert, aber mit einem höheren z-index, sodass er über dem Hintergrundbild angezeigt wird.

Der grundlegende HTML-Aufbau besteht aus zwei div-Containern: einem für das Hintergrundbild, einem für den eigentlichen Inhalt:

<div><img src="grstadt.jpg" id=
"hgbild" alt="" /></div><div id="inhalt"></div>

Damit body und html als Bezugspunkt dienen können, werden sie auf 100% gesetzt:

body, html {height: 100%;
width: 100%; overflow: hidden;}

Das Bild selbst wird absolut positioniert und auch auf 100% gesetzt:

#hgbild {height: 100%; position:
absolute; width: 100%; z-index: 1;}

Der Inhalt ist ebenfalls absolut positioniert. Hier kann man die Angaben frei wählen und auch die Breitenangabe ist beliebig. Wichtig ist, dass der Inhaltsbereich, damit er über dem Bild angezeigt wird, einen höheren Wert für den z-index erhält als das Hintergrundbild:

#inhalt {left: 10px; position:
absolute; top: 25px; width: 400px; z-index: 10;}

Das ist eine elegante Lösung, die sich gut bei Layouts nutzen lässt, die sowieso auf position:absolute setzen.

Für die Großen

Immer häufiger sieht man inzwischen Webseiten mit richtig großen Hintergrundbildern. Hier kommt es natürlich darauf an, das Bild zu optimieren, um die Dateigröße so klein wie möglich zu halten. Die aktuellen Ladezeiten können Sie dann auch gut im Firebug über den Tab Netzwerk testen. Außerdem sollten Sie natürlich unbedingt das Layout bei unterschiedlichen Auflösungen und Größen des Browserfensters überprüfen.

Eine Methode für bildschirmfüllende Hintergrundbilder liegt in der Kombination von Hintergrundbildern mit Hintergrundfarben. Das Hintergrundbild geht an den Rändern in eine durchgehende Farbe über. Dann können Sie dem Seitenhintergrund dieselbe Farbe zuweisen. Da die Hintergrundfarbe an den Stellen angezeigt wird, an denen das Hintergrundbild nicht zu sehen ist, erzeugt das die Illusion eines durchgehenden Hintergrundbildes.

Bei aller Liebe zu den Hintergrundbildern muss man aber immer eines bedenken: Ob die Hintergrundbilder ausgedruckt werden oder nicht, legt der Benutzer in seinen Druckeinstellungen im Browser fest; darauf haben Sie keinen Einfluss. Durch ein eigenes Printstylesheet können Sie allerdings dafür sorgen, dass die Informationen auch auf Papier einen guten Eindruck machen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".