Skalierbare Hintergrundbilder

Seiten mit leicht durchscheinenden Hintergründen vermitteln Lebendigkeit, Tiefe und Neugier. Aber natürlich nicht, wenn diese einfarbig oder Tapetenmuster sind. Also müssen komplette Bilder her, die etwas von der Stimmung der Seite vermitteln sollen. Viele scheuen, diesen Schritt zu gehen aus zwei Gründen:

  1. Das Bild hat meistens eine gewisse Größe, die die Ladezeiten für die Seite beeinträchtigen
  2. Es ist nicht ohne weiteres ersichtlich, wie ein Bild beschränkter Dimension unterschiedlich große Browserfenster ausfüllen kann, denn eine Wiederholung des Bildes verbietet sich bei diesem Ansatz.

Zum ersten sei kurz gesagt: bei den heutigen Downloadzeiten und Rechnergeschwindigkeiten sollte man dies nicht mehr als Argument dagegen benutzen. Mit 60 bis 100 KB kann man schon ausreichend anspruchsvolle Bilder bereitstellen und diese Größen hat man letztlich meistens auch bei den anderen Bildern.

Aber wie skaliert man nun ein Bild fester Größe auf die jeweilige Browsergröße. Im Netz werden dazu verschiedene Ansätze vorgestellt, die Vor- und Nachteile haben und hier nicht diskutiert werden können. Alle Ansätze dürften folgendes gemeinsam haben:

  • Das Hintergrundbild wird als img-Tag im html-Code bereitgestellt und nicht als background-image im CSS
  • Um eine Überlagerung des Inhalts durch das Hintergrundbildes zu vermeiden, wird mittels z-index im CSS die korrekte Darstellungsreihenfolge hergestellt.

Das Bild wird vor dem Schließen des body-Tags eingeschlossen in einem div-Container eingebracht:

<div id="gallery-wrapper">
  <img src="pfad zum bild/bild.jpg"></div>

Wir nennen den Identifyer gallery-wrapper, um anzudeuten, dass hier nicht nur ein fixes Bild stehen muss sondern auch mehrere Bilder nach einem bestimmten Algorithmus angezeigt werden können, z. B. zufällig oder seitenabhängig.

Die Skalierung des Bildes und die Darstellungsebenen für Content und Bild werden mittels CSS realisiert:

 #gallery-wrapper img{
 float:none;
 margin:0;
 min-height:100%;
 min-width:100%;
 width:auto;
 }
 #gallery-wrapper {
 height:100%;
 left:0;
 overflow:hidden;
 position:fixed;
 top:0;
 width:100%;}

Wenn man nur dies tut, skaliert zwar das Bild, aber es ist kein Hintergrundbild sondern überdeckt den davor stehenden Inhalt. Wenn man davon ausgeht, dass auch der gesamte davor stehende Inhalt in einem div-Container zusammengefasst ist (wrapped), also z.B. den Identifyer wrapper hat, so lässt sich der gesamte Bereich mit einem CSS-Statement nach oben ziehen:

div#wrapper{z-index:2;}

Evtl. muss ein höherer Wert als 2 gesetzt werden.

Es sei angemerkt, dass bei dieser Technik, das Bild nur bis zu seiner ursprünglichen Größe schrumpft. Man sollte diese Größe (genauer Breite) entsprechend der Größe des Inhaltsbereichs wählen. Bei flexiblen Layouts sollte man entsprechend kleinere Bildgrößen wählen, was natürlich zur Qualitätsverschlechterung bei der Vergrößerung führt. Die Art der gewählten Bilder – vertragen sie eine solche Verschlechterung bei gegebenem Motiv? – spielt also auch eine gewisse Rolle für die Qualität des Designs.

WordPresser bringen den html-Code am besten in die footer-Datei ein und den css-Code in style.css. Welcher div-Container den gesamten Inhalt wrappt, hängt vom Theme ab und muss entsprechend ermittelt werden, evtl. müssen auch mehrere Container „nach oben gezogen werden“.

Wer mehrere Bilder in WordPress zufällig beim Seitenwechsel anzeigen will, kann das Plugin Random Image Selector benutzen. Eine kleine Änderung dieses Plugins ist nötig, damit es nicht mit den obigen CSS-Anweisungen in Konflikt gerät. Diese Änderungen können bei mir abgefragt werden.

Die Hauptfunktion des Plugins wird dann im footer direkt wie folgt verwendet:

<div class="gallery-wrapper">
  <?php
   if (function_exists('generateRandomImgTag'))
      generateRandomImgTag();
?>
</div>

Viel Spaß beim Ausprobieren!