200822Dez

CSS: Zwei Bilder als Seitenhintergrund

Mit CSS ist möglich, ein Hintergrundbild für eine Seite festzulegen. Die Grafik kann dabei horizontal, vertikal oder in beide Richtungen wiederholt werden. In manchen Fällen möchte man jedoch zwei Bilder für den Hintergrund benutzen — so könnte beispielsweise ein Verlauf horizontal wiederholt werden, während sich darüber in der Mitte der Seite ein Hintergrundbild mit fester Größe und ohne Wiederholung befindet.
Diese Kombination könnte man mit einem Container (<div>) realisieren, so dass der horizontale Verlauf als Hintergrund für das body-Element festgelegt wird und in den Container das Hintergrundbild mit fester Größe platziert wird. Allerdings ist dieser Weg nicht immer die beste Lösung, da man so wenig Container als möglich ineinander verschachteln möchte und es sein kein, dass die feste Breite des Hauptcontainers schmaler ist als die Breite des Hintergrundbildes in der Mitte.

Beim Arbeiten mit Hintergrundbildern und Containern tritt häufig das Problem auf, dass beim Verkleinern des Browserfensters Bereiche der Website "abgeschnitten" werden, wenn man scrollt. Um dieses Phänomen besser verstehen zu können, habe ich einen Screenshot erstellt, auf dem man das Verhalten des Browsers (in diesem Fall Firefox) sehen kann.

Browserverhalten bei Hintergrundbildern

Ich habe in dem obigen Beispiel zwei Container mit zwei Größen definiert: Fest und dynamisch. Der Container mit der id "hintergrund" streckt sich auf 100% Breite und Höhe des Elternelements — in diesem Fall "body". Das Element "body" hat eine Höhe und Breite von 100%. Das bedeutet, dass die Größe des Seitenhintergrunds an die Fenstergröße des Browser angepasst wird. Wenn man nun die Fenstergröße ändert, so dass Scrollbalken benötigt werden, erhält man ein Resultat wie es im unteren Screenshot zu sehen ist: Der Container "hintergrund" wird abgeschnitten, sobald man nach rechts scrollt. Dieses ungewünschte Verhalten könnte man einfach als Fehler (Bug) des Browsers interpretieren. Dem ist jedoch nicht so, da der Browser in diesem Fall alles richtig macht — das body-Element wird auf die volle Breite und Höhe des Fensters gestreckt (und somit der Container "hintergrund" ebenfalls). Der Verlauf ist in diesem Bereich auch noch nicht abgeschnitten. Das Abschneiden geschieht erst beim Scrollen, denn dadurch bewegt man den sichtbaren Seitenbereich über die volle Breite/Höhe des Fensters hinaus.

Dieses Verhalten kann man umgehen, indem man das CSS etwas anpasst bzw. umschreibt. Nehmen wir das obige Beispiel mit den beiden Containern: Der Container "container" ist das Hintergrundbild mit der festen Größe, während der Container "hintergrund" einen horizontal gestreckten Verlauf enthält. Der CSS-Code für ein derartiges Beispiel lässt sich ohne das Verwenden von Containern realisieren und sieht wie folgt aus:

  • html {
  •    background:url(verlauf.jpg) repeat-x;
  • }
  •  
  • body {
  •    background:url(hintergrund.jpg) no-repeat center top;
  • }

So verhindert man den Fehler, der wie oben beim Ändern der Fenstergröße auftritt. Das html-Element ist in der Hierarchie dem body-Element übergeordnet und umfasst es daher. Aber: Der Fehler tritt in Firefox immer dann auf, wenn die Höhe des reinen Inhalts so gering ist, dass keine Scrollbalken benötigt werden. Dann kann man den "abgeschnittenen" Bereich sehen, indem man nach unten und anschließend nach rechts scrollt. Der Internet Explorer bleibt von diesem Fehler verschont.
Natürlich besteht eine Website nicht ausschließlich aus diesen beiden Elementen und das Verwenden von Containern ist weiterhin erforderlich. Wer ein komplexeres Beispiel sehen möchte, der kann sich meinen Artikel "CSS: Sticky Footer" anschauen.
Mit CSS3 soll es dann schließlich auch möglich sein, mehrere Hintergründe auf einer Seite zu verwenden.