Dynamische Hintergrundbilder mit jQuery und Backstretch

Backstretch ist ein schlankes, sehr einfach zu implementierendes jQuery-Plugin zur Einbindung von Hintergrundbildern. Klingt unspannend? Ist es nicht, denn Backstretch sorgt für vielerlei. Zum einen stellt es sicher, dass das Hintergrundbild browserfensterfüllend zu sehen ist. Dann sorgt es dafür, dass das Hintergrundbild bei Skalierungen der Fenstergröße dynamisch mitgeht. Und zu guter Letzt ist es sogar in der Lage, das korrekte Seitenverhältnis des Bildes auch dann zu sichern, wenn der Nutzer sein Browserfenster etwa auf Portrait skaliert, während das Bild in Landscape vorliegt. In diesem Falle ändert Backstretch den Bildausschnitt.

Backstretch im Einsatz: Fensterfüllende Hintergrundbilder, die mitskalieren

Backstretch: Von einfach bis komplex sind die Möglichkeiten

In seiner einfachsten Variante wird Backstretch über eine einzige Codezeile innerhalb eines Javascript-Abschnitts aufgerufen:

$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

Der einzige erforderliche Parameter ist die URL zu einem Bild, das durch Backstretch in den Hintergrund gelegt und dort verwaltet werden soll.

Will man eine gewisse Bewegung in den Hintergrund bekommen, bietet es sich an, Backstretch mit einer ganzen Slideshow von Bildern zu füttern. Grundsätzlich können das beliebig viele sein, die als Array übergeben werden:

var images = [
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ];

Zusätzlich lässt sich für die Slideshow einstellen, wie lange das einzelne Bild angezeigt und ob ein FadeOut-FadeIn zwischen den Bildern ausgeführt werden soll.

Wer seinen Besuchern die Wahl des Hintergrundes aus einer vordefinierten Vielfalt überlassen will, hat die Möglichkeit Backstretch per Click-Event zur Anzeige bestimmter Bilder zu veranlassen:

$("#outside").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg');
  });

Backstretch: Mehr Feintuning über weitere Optionen

Möchte man zwar nur ein einzelnes Bild anzeigen, dieses aber thematisch auf den unterschiedlichen Bereichen seiner Website variieren, so ist das unproblematisch möglich. Man richtet schlicht an entsprechender Stelle einen Backstretch-Aufruf mit der entsprechend geänderten Bild-URL ein. Theoretisch möglich, wenngleich in den meisten Fällen weniger sinnvoll, ist es sogar, Backstretch auf ein und derselben Seite zwei Mal aufzurufen.

Hinsichtlich der weiter oben erwähnten Möglichkeit, bei außerproportionalen Größenänderungen des Browserfensters den Bildausschnitt zu verändern, unterstützt Backstretch die Option, die Fixierung des Bildmittelpunkts entweder auf die X- oder die Y-Achse zu beschränken. Ohne Veränderung dieser Einstellung zentriert Backstretch beide Achsen, was in den meisten Fällen, außer bei sehr breiten, aber flachen oder bei sehr hohen, aber schmalen Bildern die richtige Wahl sein dürfte.

Backstretch setzt jQuery ab 1.6.4 voraus und steht unter der GPL-, sowie der MIT-Lizenz.

Links zum Beitrag:

• Produktseite zur Vorstellung der Funktionalität von Backstretch
• Backstretch auf GitHub

(do)