Streifenhintergrund scrollt nicht mit

[JürgenB]

Hallo,

ich habe für eine Quelltextansicht einem pre-Element einen Streifenhintergrund gegeben:

	background-image: linear-gradient(to bottom, var(--bg1) 50%, var(--bg2) 50%);
	background-position: 0 0;
	background-repeat: repeat;
	background-size: 1em 2lh;

leider scrollen die Streifen nicht mit. Woran kann das liegen? Ansehen kann man sich das zum Beispiel hier:

http://test.berkemeier.eu/GPXViewer/Beispiel4.html -> Klick auf „Quelltext anzeigen“.

Gruß
Jürgen

[Felix Riesterer]

Lieber JürgenB,

http://test.berkemeier.eu/GPXViewer/Beispiel4.html -> Klick auf „Quelltext anzeigen“.

wenn ich die Seite scrolle, kommen die Boxen mit den Graphen brav mit.

Oder meintest Du etwas anderes?

Liebe Grüße

Felix Riesterer

[JürgenB]

Hallo Felix,

Oder meintest Du etwas anderes?

ja, es geht um die Quelltextansicht nach Klick auf „Quelltext anzeigen“ oben rechts.

Gruß
Jürgen

[Bertie]

Salü Jürgen

Versuch's mal in ca. Zeile 70 mit der Ergänzung

pre { background-attachment: local; }

Allerdings passt in meinem Safari auf macOS die Streifenhöhe noch nicht ganz zur Zeilenhöhe.

Gruss, Bertie

[Felix Riesterer]

Jaja, wer lesen kann, ist klar im Vorteil:

-> Klick auf „Quelltext anzeigen“.

Also gut. Du verwendest ein Element, dessen Hintergrund mit einem Gradienten umgesetzt wird. Im Element kann der überquellende Inhalt gescrollt werden. Das Element selbst aber verharrt ungerührt an Ort und Stelle. Und deswegen bewegt sich sein Hintergrundbild ebenso wenig.

Lösung: Gib den Code-Elementen dieses Hintergrundbild - wahlweise mit wechselnder Anfangsfarbe. :nth-child(odd) fällt mir dazu ein...

Liebe Grüße

Felix Riesterer

[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é

[JürgenB]

Hallo,

danke für die Antworten. background-attachment: local; ist die Lösung. Und danach liegen auch die Streifen passend unter den Zeilen.

@Felix Riesterer: das Einfärben der Code-Elemente wäre auch meine 2. Lösung gewesen.

Vielen Dank.

Gruß
Jürgen

[Auge]

Hallo

… danach liegen auch die Streifen passend unter den Zeilen.

Ja … nein.

Getestet im Librefox 147.0.2 (entspricht Firefox 147), Standardschriftgröße für Schriften in Sans Serif, Serif und Monospace ist 16px, die Mindestschriftgröße beträgt 12px. Habe mit den Entwicklerwerkzeugen des Browsers herumgespeilt und background-size: 1em 2.07lh; hat für meine Browserinstallation gepasst. Das kann allerdings in anderen Browsern anders aussehen.

Tschö, Auge

[JürgenB]

Hallo,

… danach liegen auch die Streifen passend unter den Zeilen.

Ja … nein.

das habe ich in zwischen auch bemerkt, und zwar im Safari, im Firefox und im Chrome unter MacOS 26.2. Die Abweichung zwischen Streifengröße und und Zeilenabstand bzw. Höhe der code-Elemente hängt von der Seitenbreite ab. Mit der Seitenbreite skaliert die Schriftgröße und damit die Zeilenhöhe.

In Verbindung mit den Zeilennummern (::before) kommt es wohl zu Rundungsfehlern. Wenn ich die Schriftgröße auf ganze Pixel runde, tritt der Fehler seltener auf, aber immer noch. Ich suche noch nach dem Grund. Wenn ich nichts dazu finde, lasse ich die Zeilennummern weg.

Gruß
Jürgen

[Auge]

Hallo

Hallo,

… danach liegen auch die Streifen passend unter den Zeilen.

Ja … nein.

das habe ich in zwischen auch bemerkt, und zwar im Safari, im Firefox und im Chrome unter MacOS 26.2. Die Abweichung zwischen Streifengröße und und Zeilenabstand bzw. Höhe der code-Elemente hängt von der Seitenbreite ab. Mit der Seitenbreite skaliert die Schriftgröße und damit die Zeilenhöhe.

In Verbindung mit den Zeilennummern (::before) kommt es wohl zu Rundungsfehlern. Wenn ich die Schriftgröße auf ganze Pixel runde, tritt der Fehler seltener auf, aber immer noch. Ich suche noch nach dem Grund. Wenn ich nichts dazu finde, lasse ich die Zeilennummern weg.

Das fände ich wiederum schade. Ich finde, Zeilennummern sind eine sinnvolle Ergänzung und die Art, wie du sie erzeugst, finde ich um Längen besser, als ältere Implementierungen, die die Zeilennummern typischerweise im HTML-Quelltext enthalten (zum Beispiel in eigenen Tabellenzellen), womit diese beim kopieren von Codeschnipseln im resultierenden Text landen. Ich meine, wo kommen wir hin? Die Zeiten von BASIC mit vorangestellten Zeilennummern sind ja nun echt vorbei. 😄

Ich habe mit den Entwicklertools auf deiner Seite mit Felix' Idee, die Färbung über die code-Elemente vorzunehmen, herumexperimentiert. Mit :nth-child(2n) beziehungsweise :nth-child(2n+1) war die Färbung der Zeilen kein Problem. Allerdings reichte der Hintergrund mit den vorhandenen Regeln nur bis zum Ende des Zeileninhalts. Mit display: grid; für den Codecontainer ließ sich das aber beheben. Ob das allerdings weitere Nebenwirkungen hat, habe ich auf die Schnelle nicht geprüft.

Es ginge also auch so.

Tschö, Auge

[Gunnar Bittersmann]

@@JürgenB

In Verbindung mit den Zeilennummern (::before) kommt es wohl zu Rundungsfehlern. Wenn ich die Schriftgröße auf ganze Pixel runde, tritt der Fehler seltener auf, aber immer noch. Ich suche noch nach dem Grund. Wenn ich nichts dazu finde, lasse ich die Zeilennummern weg.

Dann lass besser den Streifenhintergrund weg. Wenn ich ein Zebra sehen will, geh ich in den Zoo oder schaue mir einen Naturfilm an, nicht eine Webseite.

IMHO trägt der Zebrastreifen nichts zur Lesbarkeit bei. Im Gegenteil: er verwirrt, wenn sich eine Codezeile über mehrere Bildschirmzeilen erstreckt und diese unterschiedlich gefärbt sind, anstatt dass die Codezeile einen einheitlichen Hintergrund hat.

Zebrastreifen kann weg. Die Zeilennummern sollten bleiben.

Die Zeilennummern sind der Grund für die Nichtübereinstimmung. Sie sind in einer anderen Schriftart (-größe?) gesetzt und brauchen etwas mehr Höhe. Damit sie sich diese nicht nehmen: & code::before { line-height: 0 }

Aber erwähnte ich schon, dass der Zebrastreifen weg kann?

🖖 Live long and prosper

[JürgenB]

Hallo Gunnar,

IMHO trägt der Zebrastreifen nichts zur Lesbarkeit bei. Im Gegenteil: er verwirrt, wenn sich eine Codezeile über mehrere Bildschirmzeilen erstreckt und diese unterschiedlich gefärbt sind, anstatt dass die Codezeile einen einheitlichen Hintergrund hat.

irgendwie hänge ich noch an den Streifen. Den Zeilenumbruch habe ich inzwischen unterdrückt, da der Kasten Fenstergröße hat, kann man beide Scrollbalken erreichen. Ich lasse das mal auf mich wirken. Evtl. mache ich die dunklen Streifen noch heller.

Die Zeilennummern sind der Grund für die Nichtübereinstimmung. Sie sind in einer anderen Schriftart (-größe?) gesetzt und brauchen etwas mehr Höhe. Damit sie sich diese nicht nehmen: & code::before { line-height: 0 }

das ist die Lösung, danke. Ich hatte es ohne Erfolg mit & code::before { line-height: 0.9lh } und auch mit Angaben zu & code::before { max-height: 2lh } probiert.

Gruß
Jürgen