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.

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:

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

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

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:

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.