Vielseitiger und farbenfroher
Hintergrund-Wrapper
Der Hintergrund-Wrapper übernimmt viele Aufgaben: Hintergründe einbinde, Grid-Spalten abgrenzen, maximale Breiten definieren und / oder ein Hintergrund-Offset erstellen.
Hintergrundbilder & -farben
Hebe deine Inhalte hervor
Definiere Farben und Bilder als Hintergrund für deine Inhalte. Dabei kannst du Bildern die Contao-Bildgrößen zuordnen und sie dadurch mit Lazy-Loading in eigenen Größen ausgeben.
Tipp: vergebe dem Artikel die Klasse "fullWidth", um den Hintergrund randlos zu füllen.
Dieses Hintergrundbild ist in WebP-konvertiert und hat die LazyLoading-Option aktiviert.
Video abspielen
Verwende ein Video als Hintergrund
Mit dem Contao-Element "Video/Audio" kannst du einen Videoheader erzeugen. Den Aufbau entnimmst du der Doku.
Das ist ein Videoheader mit Content-Elementen
Das ist ein Videoheader mit Content-Elementen
Laufweite
Definiere die Breite des Inhalts
Du hast nicht nur die Möglichkeit, den Inhalt mit einem Klick auf die Container-Breite zu trimmen; außerdem kannst du eine individuelle Breite definieren.
Der Inhalt dieses Hintergrund-Wrappers wurde auf 500px definiert.
Außerdem werden die unteren 20% dieses Wrapper mit einem Overlay bedeckt.
HTML-Tag
Semantische Tags verwenden
Erhalte mehr Kontrolle über die Ausgabe deines Grid-Wrappers. Anstelle eines Div-Containers kannst du semantische Tags verwenden und damit zur Barrierefreiheit beitragen.
<section>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
</section>