Streifenhintergrund scrollt nicht mit

[lauenroth]

Hallo JürgenB,

das Problem kenne ich gut, der Hintergrund bleibt stehen, obwohl der Inhalt im Container scrollt. Das liegt am Standardverhalten von background-attachment: scroll.

Die Lösung ist simpel: Setz background-attachment: local und der Hintergrund scrollt mit dem Inhalt mit.

pre {
  background-image: linear-gradient(
    to bottom,
    var(--bg1) 50%,
    var(--bg2) 50%
  );
  background-size: 1em 2lh;
  background-attachment: local;
}

Kurz erklärt, was die drei Werte machen:

• scroll (Standard) – Hintergrund ist am Elementrand fixiert
• fixed – Hintergrund ist am Viewport fixiert (für Parallax-Effekte)
• local – Hintergrund scrollt mit dem Inhalt mit

Safari hatte bis Version 15.3 einen Bug damit, aber seit März 2022 (Safari 15.4) funktioniert das zuverlässig in allen modernen Browsern.

Falls du auch die lh-Unit nutzt: Die hat mittlerweile 93% Support (Chrome 109+, Firefox 120+, Safari 16.4+). Wenn du ältere Browser unterstützen musst, funktioniert em mit passender line-height genauso gut als Fallback.

Hab einen Artikel über verschiedene CSS-Hintergrund-Techniken geschrieben (Parallax, scrollende Muster, Grid-Patterns usw.) – falls dich das Thema interessiert:

CSS Background-Effekte: Parallax & Patterns (webdienster.de)

Gruß, René