Contao: Vollflächige Hintergrundbilder mit dem Backgroundstretcher

Das Hintergrundbild einer Webseite ist ein beliebtes Stilmittel um eine Webseite zu gestalten weil große, imposante Fotos große, imposante Eindrücke hinterlassen. Mit dem Contao Backgroundstretcher und jetzt auch neu mit dem Contao easy Backgroundstretcher ist dies jede Contao-Installation ohne viel Umstände möglich.

Weitestgehend unabhängig von der Größe des Bildes wird das Foto mit der Javascript Bibliothek jQuery immer passend auf die jeweilige Monitorgröße skaliert – und wenn man möchte auch noch mehr, denn der Backgroundstretcher ist, im Unterschied zum easy Backgroundstretcher außerdem auch eine Hintergrund-Slideshow.

Demo anschauen

Background Stretcher
(Slideshow für Hintergrundbilder in einer Contao Webseite)

Lizenz	LGPL
Urheberrecht	© 2011 Fauth & Gundlach GmbH [contao-agentur.de] / ajaxblender.com
Autor	Sabri Karadayi (dieka) http://www.fauth-gundlach.de

Die Erweiterung backgroundstretcher im Katalog

bgstretcher

Easy Background Stretcher
Einfügen eines statischen Hintergrundbildes

Lizenz	GNU Lesser Public License (LGPL)
Urheberrecht	© 2012 Christian Barkowsky
Autor	Christian Barkowsky (christian.barkowsky) http://www.christianbarkowsky.de

Die Erweiterung backgroundstretcher im Katalog

Contao 2.11.x | /easy_bg_stretcher.10000009.de.html
Contao 3 | easy_bg_stretcher.10000019.de.html

Installationshinweise Backgroundstretcher

1. Slider anlegen, Optionen wählen und Bilder hinzufügen

Nach der Installation der Erweiterung über den Erweiterungskatalog steht in der Werkzeugleiste des Backends ein neuer Menüpunkt mit der Aufschrift „Background stretcher“ bereit. Über diesen Menüpunkt wird zunächst der Backgroundstretcher („Slideshow“) angelegt. Bei den Optionen können neben der Größe auch die Einblendungsdauer, die Effektart und -dauer als auch die Abspielreihenfolge gewählt werden. Sind die Optionen gewählt wird der Hintergrundstretcher abgespeichert. Über das Bearbeiten-Symbol und „neues Element einfügen“ werden nun die Bilder, die als Hintergrundbild verwendet werden sollen, hinzugefügt.

2. Modul erstellen

Als nächstes muss ein Modul vom Typ „Backgroundstretcher“ erstellt werden. Anschließend das Modul entweder im Artikel als Inhaltselement einfügen oder in der Seitenvorlage bei den Modulen hinzufügen (Layoutbereich ist egal). Bei der Seitenvorlage drauf achten, dass Jquery aktiviert ist.

Erweiterte Optionen

Weitere Einstellmöglichkeiten
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html

Hinweise Easy Backgroundstretcher

Easy Backgroundstretcher ist so etwas wie der kleiner Bruder von Backgroundstretcher, denn er verzichtet auf Einstellmöglichkeiten und Bildwechsel. Er eignet sich immer dann, wenn nur ein (1) Bild als sich auf die jeweilige Monitorgröße anpassendes, Hintergrundbild eingesetzt werden soll.

Installation

Nach der Installation steht der easy backgroundstretcher als Inhaltselement zur Verfügung. Einfach in den Artikel gehen, das Inhaltselement einfügen, Bild aussuchen – fertig.

Hinweis: In der Seitenvorlage muss jQuery aktiviert sein.
Wenn’s nicht tut, moo_jquery_nc aktivieren.