CSS Background-Effekte: Parallax & Patterns

CSS-Hintergründe sind weit mehr als nur Farben oder Bilder. Mit modernen Techniken lassen sich subtile Muster, Parallax-Effekte und dynamisch scrollende Backgrounds erstellen – ganz ohne JavaScript. In diesem Tutorial zeige ich die wichtigsten Techniken mit vollständigen Code-Beispielen.

Gradient-Backgrounds: Die Grundlagen

Gradients sind das Fundament vieler moderner Hintergrund-Designs. Sie lassen sich beliebig kombinieren und schichten.

Lineare Gradients für Hero-Sections

/* Diagonaler Gradient für Hero-Bereiche */
.hero {
  background: linear-gradient(
    135deg,
    hsl(231 77% 60%) 0%,
    hsl(271 47% 50%) 100%
  );
  min-height: 100vh;
}

/* Mehrfarbiger Gradient mit definierten Übergängen */
.gradient-complex {
  background: linear-gradient(
    to right,
    hsl(200 80% 50%) 0%,
    hsl(200 80% 50%) 30%,
    hsl(260 70% 55%) 70%,
    hsl(260 70% 55%) 100%
  );
}

Radiale Gradients für Spotlight-Effekte

/* Spotlight-Effekt von einer bestimmten Position */
.spotlight {
  background: radial-gradient(
    circle at 30% 40%,
    hsl(200 80% 50% / 0.3),
    transparent 60%
  );
}

/* Mehrere überlagerte Spotlights */
.multi-spotlight {
  background:
    radial-gradient(circle at 20% 30%, hsl(200 80% 50% / 0.2), transparent 40%),
    radial-gradient(circle at 80% 70%, hsl(280 70% 50% / 0.2), transparent 40%),
    hsl(220 15% 10%);
}

Parallax-Effekte mit background-attachment: fixed

Der klassische Parallax-Effekt entsteht durch background-attachment: fixed. Das Hintergrundbild bleibt am Viewport fixiert, während der Inhalt darüber scrollt.

/* Klassischer Parallax-Hero */
.parallax-section {
  background-image: url('/images/hero.webp');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  min-height: 70vh;
}

/* Mit Overlay für bessere Lesbarkeit */
.parallax-with-overlay {
  background:
    linear-gradient(hsl(220 15% 10% / 0.7), hsl(220 15% 10% / 0.7)),
    url('/images/hero.webp') center / cover fixed;
  min-height: 70vh;
}

Mobile Fallback – iOS-Probleme

background-attachment: fixed funktioniert auf iOS Safari nicht zuverlässig. Ein Fallback ist daher essentiell:

.parallax-section {
  background-image: url('/images/hero.webp');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/* Mobile Fallback */
@media (max-width: 1024px) {
  .parallax-section {
    background-attachment: scroll;
  }
}

/* Alternative: Feature-Query */
@supports not (background-attachment: fixed) {
  .parallax-section {
    background-attachment: scroll;
  }
}

Scrollende Hintergründe in Containern

Ein häufiges Problem: Ein scrollbarer Container hat einen gemusterten Hintergrund, der beim Scrollen stehen bleibt. Der Inhalt scrollt, aber das Muster nicht – was unnatürlich wirkt.

Das Problem verstehen

/* Standard-Verhalten: Hintergrund scrollt NICHT mit */
.scrollable-box {
  max-height: 300px;
  overflow-y: auto;
  background-image: url('/pattern.svg');
  background-size: 20px 20px;
  /* background-attachment: scroll; ist Standard */
}

Mit dem Standard-Wert scroll ist der Hintergrund am Element-Rahmen fixiert. Beim Scrollen innerhalb des Elements bewegt sich der Rahmen nicht – also auch nicht der Hintergrund.

Die Lösung: background-attachment: local

/* Hintergrund scrollt MIT dem Inhalt */
.scrollable-box {
  max-height: 300px;
  overflow-y: auto;
  background-image: url('/pattern.svg');
  background-attachment: local;
  background-size: 20px 20px;
}

Die drei Werte im Vergleich

Wert	Verhalten	Anwendungsfall
scroll	Fixiert am Element-Rand	Normale Seiten (Standard)
fixed	Fixiert am Viewport	Parallax-Effekte
local	Scrollt mit dem Inhalt	Scrollbare Container

Browser-Kompatibilität

background-attachment: local hat 96,25% Browser-Support. Safari hatte bis Version 15.3 einen Bug, aber seit Safari 15.4 (März 2022) funktioniert es zuverlässig in allen modernen Browsern.

CSS Streifen-Muster für Code-Blöcke

Alternierend gefärbte Zeilen in <pre>-Elementen verbessern die Lesbarkeit von Code-Blöcken erheblich.

Klassische Lösung mit em

/* Zebrastreifen für Code-Blöcke */
.code-block {
  background: repeating-linear-gradient(
    to bottom,
    hsl(220 15% 13%) 0,
    hsl(220 15% 13%) 1.5em,
    hsl(220 15% 16%) 1.5em,
    hsl(220 15% 16%) 3em
  );
  background-attachment: local;
  line-height: 1.5;
  padding: 1em;
  overflow: auto;
  font-family: monospace;
}

Moderne Lösung mit der lh-Unit

Die lh-Unit (line-height) passt sich automatisch an die Zeilenhöhe an – perfekt für Zebrastreifen:

/* Mit lh-Unit (93% Browser-Support) */
@supports (height: 1lh) {
  .code-block-modern {
    background: repeating-linear-gradient(
      to bottom,
      hsl(220 15% 13%) 0,
      hsl(220 15% 13%) 1lh,
      hsl(220 15% 16%) 1lh,
      hsl(220 15% 16%) 2lh
    );
    background-attachment: local;
  }
}

Die lh-Unit wird seit Chrome 109, Firefox 120 und Safari 16.4 unterstützt.

Kombiniert: Mit Fallback

.code-block {
  /* Fallback für ältere Browser */
  background: repeating-linear-gradient(
    to bottom,
    hsl(220 15% 13%) 0,
    hsl(220 15% 13%) 1.5em,
    hsl(220 15% 16%) 1.5em,
    hsl(220 15% 16%) 3em
  );
  background-attachment: local;
  line-height: 1.5;
  padding: 1em;
  overflow: auto;
}

/* Progressive Enhancement mit lh */
@supports (height: 1lh) {
  .code-block {
    background: repeating-linear-gradient(
      to bottom,
      hsl(220 15% 13%) 0,
      hsl(220 15% 13%) 1lh,
      hsl(220 15% 16%) 1lh,
      hsl(220 15% 16%) 2lh
    );
  }
}

Subtile Grid-Patterns

Dezente Raster im Hintergrund verleihen Designs Tiefe, ohne aufdringlich zu wirken.

Einfaches Punktraster

.dot-pattern {
  background-image: radial-gradient(
    circle,
    hsl(0 0% 100% / 0.1) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

Linienraster

.line-grid {
  background-image:
    linear-gradient(
      hsl(0 0% 100% / 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      hsl(0 0% 100% / 0.03) 1px,
      transparent 1px
    );
  background-size: 24px 24px;
}

Kombiniertes Grid mit Akzenten

.complex-grid {
  background-image:
    /* Große Akzentlinien alle 96px */
    linear-gradient(hsl(200 80% 50% / 0.1) 1px, transparent 1px),
    linear-gradient(90deg, hsl(200 80% 50% / 0.1) 1px, transparent 1px),
    /* Feine Linien alle 24px */
    linear-gradient(hsl(0 0% 100% / 0.03) 1px, transparent 1px),
    linear-gradient(90deg, hsl(0 0% 100% / 0.03) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}

Browser-Kompatibilität im Überblick

Feature	Chrome	Firefox	Safari	Edge	iOS Safari
local	4+	25+	15.4+	12+	15.4+
fixed	4+	25+	5+	12+	⚠️ Buggy
lh-Unit	109+	120+	16.4+	109+	16.4+
repeating-linear-gradient	10+	16+	5.1+	12+	5.1+

Bekannte Einschränkungen

• iOS Safari: background-attachment: fixed funktioniert nicht wie erwartet – Fallback zu scroll verwenden
• Safari 14-15.3: Bug mit local/fixed beim Scrollen äußerer Container – seit 15.4 behoben
• Samsung Internet: local funktioniert nur zuverlässig mit border-radius

Performance-Tipps

1. fixed sparsam einsetzen

background-attachment: fixed verursacht bei jedem Scroll-Frame ein Repaint. Bei großen Bildern oder mehreren fixierten Hintergründen kann das zu spürbarem Lag führen.

/* Besser: Pseudo-Element mit transform */
.parallax-performant {
  position: relative;
  overflow: hidden;
}

.parallax-performant::before {
  content: '';
  position: absolute;
  inset: -10%; /* Etwas größer für Scroll-Spielraum */
  background: url('/hero.webp') center / cover;
  will-change: transform;
  z-index: -1;
}

2. Bilder optimieren

Für Hintergrundbilder gelten die gleichen Optimierungsregeln wie für <img>:

• WebP oder AVIF statt JPEG/PNG
• Angemessene Auflösung (nicht größer als nötig)
• Lazy Loading für Hintergründe unterhalb des Viewports

3. Gradient-Performance

Gradients sind in der Regel performant. Bei sehr komplexen Gradienten mit vielen Color-Stops kann es jedoch zu Rendering-Problemen kommen:

/* Performant: Wenige Color-Stops */
.simple-gradient {
  background: linear-gradient(135deg, hsl(200 80% 50%), hsl(260 70% 55%));
}

/* Potenziell problematisch: Viele Color-Stops */
.complex-gradient {
  background: linear-gradient(
    135deg,
    hsl(200 80% 50%) 0%,
    hsl(210 75% 52%) 10%,
    hsl(220 70% 54%) 20%,
    /* ... viele weitere Stops ... */
    hsl(260 70% 55%) 100%
  );
}

Praktisches Beispiel: Vollständiger Code-Block

Hier ein vollständiges Beispiel für einen Code-Block mit Zebrastreifen, der alle besprochenen Techniken kombiniert:

/* Moderner Code-Block mit scrollenden Zebrastreifen */
.code-block {
  /* Layout */
  max-height: 400px;
  overflow: auto;
  padding: 1em;
  border-radius: 8px;

  /* Typografie */
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  tab-size: 2;

  /* Fallback-Hintergrund */
  background-color: hsl(220 15% 13%);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 1.6em,
    hsl(220 15% 16%) 1.6em,
    hsl(220 15% 16%) 3.2em
  );
  background-attachment: local;
}

/* Progressive Enhancement mit lh-Unit */
@supports (height: 1lh) {
  .code-block {
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 1lh,
      hsl(220 15% 16%) 1lh,
      hsl(220 15% 16%) 2lh
    );
  }
}

Fazit

CSS bietet leistungsstarke Möglichkeiten für Hintergrund-Effekte ohne JavaScript. Die wichtigsten Erkenntnisse:

1. background-attachment: local ist die Lösung für scrollende Hintergründe in Containern
2. background-attachment: fixed erzeugt Parallax-Effekte, braucht aber Mobile-Fallbacks
3. repeating-linear-gradient eignet sich perfekt für Streifen-Muster
4. Die lh-Unit macht Zeilen-basierte Muster robust und wartbar
5. Performance im Blick behalten: Besonders fixed kann bei großen Bildern problematisch sein

Die Kombination dieser Techniken ermöglicht kreative, performante Designs – ganz ohne externe Bibliotheken oder JavaScript.

Verwandte Inhalte

• Interaktives Design - Professionelle Animationen für Ihre Website
• Responsive Design - Mobile Fallbacks für CSS-Effekte
• Performance-Optimierung - Effekte ohne Performance-Einbußen