Fotos als Hintergrundbild mit bgStretcher
Zurück zum Blog

Fotos als Hintergrundbild mit bgStretcher

Heute stelle ich nettes jQuery-Plugin, zur Darstellung von vollformatigen Fotos als Hintergrundbild, vor. Auf das Plugin bin ich bei der Entwicklung der neuen KEYNET-Website gestoßen, da der Inhaltsbereich durch ein fix positioniertes Bild begrenzt werden sollte.

Das gerade einmal 3.7 KB große Plugin bietet einige Einstellungsmöglichkeiten, wie etwa eine Slideshow, die die Fotos automatisch rotieren lässt. Auf der Website des Plugins können die einzelnen Optionen nachgelesen werden.

Ein kleiner Performance Tipp:

Falls Ihr kein Script verwendet, das alle JavaScript oder CSS-Dateien auf ein File zusammenfügt, bindet nicht, wie auf der Website des Plugins beschrieben, die mitgelieferte CSS-Datei als als externe Resource ein, sondern kopiert den Inhalt der CSS-Datei in Euer eigentliches Stylesheet ein. Es sind gerade einmal 18 Zeilen CSS-Code, die das eigene CSS-File sicher nicht unübersichtlich werden, aber zugleich eine unnötigen HTTP-Request weg lassen.

<script type="text/javascript" src="fileadmin/js/bgstretcher.js"></script>
<script type="text/javascript" src="fileadmin/js/scripts.js"></script>
$(document).ready(function(){
    $(document).bgStretcher({
        images: ['fileadmin/img/bg_pics/pic1.jpg'],
        imageWidth: 1024, imageHeight: 768
    });
});
#container {
  position: relative;
  z-index: 2;
}

Das war es dann auch schon! Eventuell, wenn das Plugin wie bei mir unter TYPO3 verwendet wird, noch den Cache des Redaktionssystem leeren.

Diesen Artikel teilen

Schreiben Sie den ersten Kommentar zu diesem Artikel

Ihr Kommentar

Bitte geben Sie Ihren Namen an
Bitte geben Sie eine E-Mail Adresse an
Bitte geben Sie eine Nachricht ein
Das Ergebnis ist nicht korrekt