Kernidee ist die Trennung zwischen Content-Breite und Background-Breite: Inhalte können im Container bleiben, während der Hintergrund über die volle Viewport-Breite läuft („full bleed“). Das ist besonders hilfreich, um Abschnitte klar zu gliedern, ohne das Grid oder den Lesefluss zu zerstören.
Ein wichtiger Baustein sind die SVG-Patterns. Sie sind bewusst als dezente Hintergrund-Layer gedacht: leichtgewichtig, in jeder Auflösung scharf und gut an das Theme koppelbar. Typische Einsätze sind ruhige Section-Bühnen, visuelle Trenner zwischen Abschnitten oder ein “Highlight”-Hintergrund für Feature-Übersichten – ohne dass man dafür große Background-Bilder oder Sonder-CSS braucht.
Zusätzlich gibt es die Hintergrund-Effekte. Diese Effekte sind als Overlay/Finish gedacht: Sie geben Flächen Tiefe, verbessern den Kontrast oder machen große Bereiche weniger “flach”, ohne den Content zu überlagern.
Effekte im Überblick:
- Dim: legt ein transparentes Overlay über den Hintergrund und hilft besonders bei Bildern oder kräftigen Farben, damit Text ruhiger lesbar bleibt.
- Gradient: ein Verlauf-Overlay, das Lesbarkeit gezielt unterstützen kann (z.B. Richtung Headline/CTA).
- Noise: leichte Körnung, um große Farbflächen natürlicher wirken zu lassen.
- Blur: erzeugt einen “Glass”-Look durch Weichzeichnung des Hintergrunds – ideal für moderne Highlight-Flächen.
- Fixed: fixiert den Hintergrund (parallax-ähnlich) und kann bei langen Seiten subtil für mehr Tiefe sorgen.
Die Optionen sind bewusst kontrolliert: Statt beliebiger Freiheit gibt es eine wiederholbare Auswahl an Styles, die auch nach Monaten noch “wie aus einem Guss” wirkt – gerade wenn mehrere Redakteure an der Seite arbeiten. Im Dark Mode bleibt das System stabil, wenn Textfarbe über Auto/kontrast oder theme-adaptive Klassen wie text-body gelöst wird und Effekte wie Dim/Gradient gezielt für Lesbarkeit eingesetzt werden.
Beispiele
Hintergrundfarbe volle Breite - Mit Effekt: Farbverlauf-Overlay
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.
Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.
Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder
SVG Pattern volle Breite und Parallax Effekt
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.
Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.
Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder
Hintergrundbild volle Breite mit Parallax Effekt
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.
Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.
Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder
Hintergrund und Inhalt volle Breite
Hintergrund und Inhalt volle Breite
Hintergrund und Inhalt volle Breite
Hintergrund und Inhalt volle Breite