Viele Website-Designs verwenden Hintergrundbilder. Dabei gibt es zwei Grundformen:
In den meisten Fällen füllt das sich wiederholende Hintergrundbilder den gesamten Bildschirmbereich. Das heißt, sie werden als normales Attribut im body-Bereich verwendet, zum Beispiel so:
Beispiel mit ganzseitig wiederholendem Hintergrundbild
Die in diesem Beispiel verwendete CSS-Festlegung sieht so aus:
Es ist aber auch möglich, die Wiederholung auf eine Richtung zu beschränken, entweder waagerecht oder senkrecht, zum Beispiel so:
Beispiel mit einem sich waagerecht wiederholenden Hintergrundbild
Dazu der CSS-Code:
Wenn man ein besonderes Motiv als Hintergrundbild verwenden will, dann ist meist keine Wiederholung erwünscht. Eine einfache Variante sieht so aus: Beispiel.
Dazu der CSS-Code:
Das ist natürlich noch unbefriedigend, denn das Hintergrundbild klebt links oben in der Ecke.
Eine waagerechte Zentrierung ist aber unproblematisch: Beispiel.
Dazu der CSS-Code:
Außerdem kann man vermeiden, dass das Hintergrundbild bei längeren Seiten aus dem sichtbaren Bereich scrollt: Beispiel
Dazu der CSS-Code:
Bei all diesen Beispielen wurde die Größe des Hintergrundbildes nicht verändert. Das hat einen einfachen Grund: der CSS2-Standard sieht eine Anpassung der Größe des Hintergrundbildes nicht vor.
Um dennoch eine Größenanpassung zu erreichen, muss man einen Trick anwenden. Hier zunächst das Beispiel mit Größenanpassung. Der Anpassungseffekt wird dadurch erreicht, dass das Bild nicht als Hintergrundbild sondern mit dem img-Tag eingefügt wird. Alle Elemente werden absolut positioniert.
Der erforderliche CSS-Code sieht so aus:
Und das ist der HTML-Teil:
Es darf aber nicht verschwiegen werden, dass diese Größenpassung zu negativen Effekten führen kann: Je nach dem, wie weit die Proportionen von Höhe und Breite beim PC des Betrachters von den Proportionen des Orginalbildes abweichen, wird das Bild mehr oder weniger stark verzerrt. Das kann dann auch schon mal zu unfreiwilliger Belustigung führen.