Background & Fullwidth-System
Einheitliche Appearance-Logik für Sektionen – von Container bis Full-Bleed Background.
Hintergründe als wiederholbares Design-Pattern
Hintergründe werden in ATLAS nicht als dekoratives Beiwerk verstanden, sondern als wiederverwendbares Design-Pattern.
Jeder Hintergrund basiert auf demselben strukturellen Aufbau und denselben Optionen:
- Background-Typen
- Farbe (theme-basiert, kontrastfähig)
- Media (Bild / Video)
- SVG-Pattern
- Animation / Effektlayer
- Muster & Overlays
- Einheitliche Steuerung
- gleiche Auswahlmechanik in allen Content-Elementen
- identisches Verhalten in Light- & Dark-Mode
- konsistente Klassennamen und Rendering-Logik
Das sorgt dafür, dass Seiten auch bei wachsendem Umfang visuell ruhig und nachvollziehbar bleiben – selbst wenn mehrere Redakteure daran arbeiten.
Trennung von Content-Breite und Background-Breite
Kernidee des Systems ist die saubere Trennung zwischen Inhalt und Fläche:
- Inhalte bleiben im definierten Container-Grid
- Hintergründe können optional über die gesamte Viewport-Breite laufen („Full Bleed“)
So lassen sich Sektionen klar gliedern, Akzente setzen oder Themenblöcke hervorheben, ohne den Lesefluss oder das Layout-Raster zu brechen. Das Grid bleibt stabil – die Bühne wird größer.
SVG-Patterns als leichtgewichtige Layer
Ein zentrales Element des Systems sind die SVG-Patterns.
Sie sind bewusst als dezente Hintergrund-Layer konzipiert:
- vektorbasiert, scharf in jeder Auflösung
- extrem performant
- farblich an das Theme gekoppelt
- vollständig per CSS steuerbar
Typische Einsatzszenarien:
- ruhige Section-Hintergründe
- visuelle Übergänge zwischen Inhaltsblöcken
- Hervorhebung von Feature-Bereichen
Große Hintergrundbilder oder projektspezifisches Sonder-CSS werden dadurch oft überflüssig.
Hintergrund-Effekte
Tiefe statt Dekoration
Zusätzlich zu Farben, Medien und Patterns stehen optionale Effekt-Layer zur Verfügung.
Diese Effekte sind bewusst als Finish gedacht – sie unterstützen Lesbarkeit und Tiefe, ohne Content zu überlagern.
| Verfügbare Effekte | Erklärung |
|---|---|
| Dim | Transparenter Overlay zur Beruhigung kräftiger Farben oder Bilder |
| Gradient | Verlauf-Overlay zur gezielten Kontraststeuerung (z. B. Richtung Headline oder CTA) |
| Noise | Dezente Körnung für natürlichere, weniger „digitale“ Flächen |
| Blur | Weichzeichnung für moderne Glass- oder Highlight-Looks |
| Fixed | Fixierter Hintergrund für subtile Parallax-Effekte und mehr räumliche Tiefe |
Alle Effekte sind kontrolliert einsetzbar.
Statt unendlicher Kombinationsmöglichkeiten gibt es eine kuratierte Auswahl, die auch langfristig konsistent bleibt.
Gerade im Dark Mode zeigt sich die Stärke des Systems:
Textfarben über Auto-Kontrast oder theme-adaptive Klassen (z. B. text-body) und gezielt eingesetzte Dim- oder Gradient-Overlays sorgen für stabile Lesbarkeit in jeder Kombination.
Wave Dividers
Organische Übergänge zwischen Sektionen
Als Erweiterung des Background-Systems bietet ATLAS SVG Wave Dividers – eine elegante Alternative zu harten Schnittkanten.
Die Wellen können am Anfang und/oder Ende eines Content-Elements eingesetzt werden und passen sich automatisch an die Hintergrundfarbe des folgenden Frames an.
Varianten
- Single
Dezenter Einzelwellen-Übergang - Double
Zwei überlagerte Wellen für mehr Tiefe - Triple
Drei geschichtete Wellen für maximalen organischen Effekt
Technische Umsetzung
Die Wave Dividers basieren auf mask-image mit Data-URI-kodierten SVGs:
- keine zusätzlichen Assets
- vollständig CSS-gesteuert
- skalierbar & performant
- farbadaptiv zum nachfolgenden Frame
Besonders praktisch:
Wave Dividers funktionieren nahtlos mit Fullwidth-Layouts, Parallax-Hintergründen, SVG-Patterns und Effekt-Layern – ohne visuelle Konflikte oder Sonderlogik.
Fazit
Das Background & Fullwidth-System ist kein einzelnes Feature, sondern ein tragendes Gestaltungsfundament von ATLAS.
Es verbindet technische Sauberkeit mit gestalterischer Freiheit und sorgt dafür, dass auch komplexe Seiten über Jahre hinweg wie aus einem Guss wirken.