Der Hintergrund-Wrapper

Um den vollen Funktionsumfang des Hintergrund-Wrapper zu nutzen, installiere die Contao-Erweiterung CustomElements von Rocksolid und verwende den "Hintergrund-Wrapper" von themore. Wie alle Wrapper-Elemente besteht es aus einem Start- und End-Element.

Den Hintergrund-Wrapper verwenden

Der Hintergrund-Wrapper biete viele Einsatzmöglichkeiten. Die Hauptaufgabe besteht natürlich darin, einen Hintergrund zu definieren. Dafür gibt es gleiche mehrere Möglichkeiten:

1. Wähle ein Hintergrundbild über die Dateiverwaltung, Hintergrund-Eigenschaften kannst du dann über das Textfeld "Hintergrund-Styling" definieren
2. Wähle einen HEX-Code als Hintergrundfarbe über das Auswahlfeld oder tragen diesen ohne Raute ein
3. Wähle eine Hintergrundfarbe über die CSS-Klassen. Diese können über die variables.scss verändert werden.

Erstelle dafür ein Inhaltselement vom Elementtyp "Hintergrund-Wrapper [Anfang]" und "Hintergrund-Wrapper [Ende]". Füge dort zwischen deine Elemente ein.

Volle Breite und Inhaltsbreite

Ganz groß und ganz klein - beides kein Problem. Damit du ein Element über die komplette Breite anzeigen lassen kannst, benötigst der jeweilige Artikel die Klasse fullWidth. Nun sind die Inhalte des Artikels randfüllend. Dabei empfiehlt es sich die Einstellung Container-Size im Hintergrund-Wrapper zu setzen. Dadurch bleibt der Hintergrund auf voller Breite, die Inhalte schrumpfen allerdings auf die maximale Containergröße ($container-size).

Möchtest du dem Inhalt eine individuelle Maximalbreite geben, funktioniert dies über das Feld Individuelle Max-Breite. Somit kannst du z.B. 800px oder 90% eintragen. Der Inhalt wird weiterhin zentriert.

Farbiges Overlay

Mit dem Overlay kannst du kreativ werden. Es dient dazu eine neue Farbebene einzubinden und liegt über dem Hintergrundbild oder der Hintergrundfarbe. Damit kannst du ein Overlay auf 50 % der Höhe definieren, damit auf halber Höhe die normale Hintergrundfarbe gebrochen wird.

Alternativ kannst du einen HEX-Code mit Transparenz verwenden. Das tust du, in dem du einem 6-stelligen HEX-Code noch zwei zweitere stellen für die Deckkraft mitgibst. FF0000 ist ein Rot; FF000055 ist ein stark durchsichtiges Rot. Wähle ein Overlay mit dieser Farbe, 100% Höhe und setze ein Hintergrundbild. Nun hat dieses Bild ein farbiges Overlay.