Background Gradient beim Scrollen

[Ulrikop]

Hallo,
ich habe als Hintergrund eines Divs einen Farbverlauf mit linear-gradient erstellt. Der Div-Block ist allerdings scrollbar. Beim Scrollen verschwindet allerdings die Hintergrundsfarbe, so dass nur er nur in dem Breich angezeigt wird, der initial zu sehen war.

Als ich einen Farbverlauf als Hintergrund des gesamten bodys hatte, habe ich das Problem mit folgender CSS-Zeile behoben:
background-attachment: fixed;

In diesem Fall bringt es leider nichts. Bzw. es hat schon eine Auswirkung: Beim Scrollen verschwindet es zwar aber die Farbe des Farbverlaufs der zu sehen ist, die verändert sich. Habe das Gefühl, dass er durch das fixed da den Farbverlauf an die obere und untere Seite des Bildschirms fixiert. Das heißt, es ist nicht wie im ursprünglichen Der Farbverlauf über einen Bereich von 2 cm, sondern über zum Beispiel 30 cm, und es wird halt nur ein Bereich von 2 cm angezeit.

Damit man es sich besser vorstellen kann, hab ich es als jsfiddle Beispiel nachgebaut. Habe das Beispiel 2 Mal: Im oberen ohne fixed, im unteren mit fixed.

Wie schaffe ich es, dass der Farbverlauf wie im oberen Beispiel aussieht aber dass er so stehen bleibt, wenn ich das Div scrolle?

Vielen Dank für eure Hilfe!

[Matthias Apsel]

Om nah hoo pez nyeetz, Ulrikop!

Als ich einen Farbverlauf als Hintergrund des gesamten bodys hatte, habe ich das Problem mit folgender CSS-Zeile behoben:
background-attachment: fixed;

In diesem Fall bringt es leider nichts. Bzw. es hat schon eine Auswirkung: Beim Scrollen verschwindet es zwar aber die Farbe des Farbverlaufs der zu sehen ist, die verändert sich. Habe das Gefühl, dass er durch das fixed da den Farbverlauf an die obere und untere Seite des Bildschirms fixiert.

Wenn man das nachliest, braucht man sich nicht auf sein Gefühl verlassen.

Wie schaffe ich es, dass der Farbverlauf wie im oberen Beispiel aussieht aber dass er so stehen bleibt, wenn ich das Div scrolle?

Gib dem Hintergrund dem Element .table.

Warum zum Teufel, baust du denn eine Tabelle mit div-Elementen nach???

Matthias

[Ulrikop]

Hallo,
Danke für deine Antwort.

Wenn man das nachliest, braucht man sich nicht auf sein Gefühl verlassen.

Ahh, danke. Gut zu wissen!

Gib dem Hintergrund dem Element .table.

Das war ein abgespecktes Beispiel. Die Farbe soll nur über den Header gehen, der Inhalt, der darauf folgt, soll davon nicht betroffen sein. Ich habe mal ein bisschen größeren jsfiddle Beispiel, damit man sich den Rest vorstellen kann. Ich finde damit kein Div, dass ich den Farbverlauf zuweisen kann, so dass es funktioniert.
Ursprünglich habe ich eine Tabelle den CSS-Werten

display: table;  
display: table-row;  
display: table-cell;

erstelle. Stieß damit aber auf 3 Probleme, die ich damit nicht lösen konnte:

• Ich wollte Multicolumns (wie bei der Zelle Januar, dass sich über die ersten 5 Spalten hinweg zieht) nutzen.
• Der Verlauf der Farbe des Headers soll sich über die beiden Header-Zeilen (Monate und Wochen) hinziehen.
• Die linke Spalte soll fixiert sein, die restlichen scrollbar.

Da dachte ich mir: Eigentlich ist genau definiert, wie hoch und breit die Spalten sein sollen. Dann benötige ich ja nicht zwingend eine Tabelle von HTML, sondern kann mir eine ganz einfach selber zusammenbauen.
Ansich finde ich das Ergebnis ganz ok. Probleme ist nur der hier angesprochene Farbverlauf im Header. Außerdem gefallen mir die Rahmen noch nicht, da sie zum Beispiel bei dem scrollbarn Bereich oben nicht angezeigt werden und der des Inhalts über dem Header liegt (auch wenn ich den z-index ändere). Habe outline genommen, damit ich von width und height Werten ausgehen kann und nicht wie bei border den Rahmen beachten muss.
Aber das ist ein kleines Problem, würde erstmal den Farbverlauf im Header hinkriegen.

[Matthias Apsel]

Om nah hoo pez nyeetz, Ulrikop!

Das war ein abgespecktes Beispiel. Die Farbe soll nur über den Header gehen, der Inhalt, der darauf folgt, soll davon nicht betroffen sein. Ich habe mal ein bisschen größeren jsfiddle Beispiel, damit man sich den Rest vorstellen kann. Ich finde damit kein Div, dass ich den Farbverlauf zuweisen kann, so dass es funktioniert.

.table_content {  
  background-image: linear-gradient(black, white);  
  background-size: 100% 50px;  
  background-repeat: no-repeat;  
}

• Ich wollte Multicolumns (wie bei der Zelle Januar, dass sich über die ersten 5 Spalten hinweg zieht) nutzen.

colspan ist dein Freund;

• Der Verlauf der Farbe des Headers soll sich über die beiden Header-Zeilen (Monate und Wochen) hinziehen.

ein Verlauf für thead sollte es tun.

• Die linke Spalte soll fixiert sein, die restlichen scrollbar.

Das ist schwierig

Da dachte ich mir: Eigentlich ist genau definiert, wie hoch und breit die Spalten sein sollen. Dann benötige ich ja nicht zwingend eine Tabelle von HTML, sondern kann mir eine ganz einfach selber zusammenbauen.

Damit geht aber der logische Zusammenhang zwischen Spaltenkopf und Inhalt verloren.

Ansich finde ich das Ergebnis ganz ok. Probleme ist nur der hier angesprochene Farbverlauf im Header. Außerdem gefallen mir die Rahmen noch nicht, da sie zum Beispiel bei dem scrollbarn Bereich oben nicht angezeigt werden und der des Inhalts über dem Header liegt (auch wenn ich den z-index ändere). Habe outline genommen, damit ich von width und height Werten ausgehen kann und nicht wie bei border den Rahmen beachten muss.

Box-sizing ist dein Freund. Außenabstände sollten die Anzeige der oberen Rahmenlinien sicherstellen.

Matthias

[Ulrikop]

.table_content {

background-image: linear-gradient(black, white);
  background-size: 100% 50px;
  background-repeat: no-repeat;
}

  
ja, das ist es! Super, danke.  
  

> > - Ich wollte Multicolumns (wie bei der Zelle Januar, dass sich über die ersten 5 Spalten hinweg zieht) nutzen.  
> colspan ist dein Freund;  
  
Richtig, wenn ich die Tabellen-Elemente von html verwenden würde. Da ich das Stylen aber lieber über css mache, kommt hier nur display: table in Frage und die bieten leider keine Multicolumn.  
  

> > - Der Verlauf der Farbe des Headers soll sich über die beiden Header-Zeilen (Monate und Wochen) hinziehen.  
> ein Verlauf für thead sollte es tun.  
  
Nein, das div head wie es jetzt ist, dürfte nicht gemacht werden. Sonst wären hier zwei Zeilen drin und die dritte folgt danach wieder einzeln. Die beiden in head würden eine eigene Tabelle bilden und somit stimmen die Spalten nicht mehr mit den folgenden zusammen (zumindest mit display: table, da habe ich das anfangs probiert.)  
  

> > - Die linke Spalte soll fixiert sein, die restlichen scrollbar.  
> Das ist schwierig  
  
Deshalb diese Lösung, die genau so ist wie ich es will.  
  

> > Ansich finde ich das Ergebnis ganz ok. Probleme ist nur der hier angesprochene Farbverlauf im Header. Außerdem gefallen mir die Rahmen noch nicht, da sie zum Beispiel bei dem scrollbarn Bereich oben nicht angezeigt werden und der des Inhalts über dem Header liegt (auch wenn ich den z-index ändere). Habe outline genommen, damit ich von width und height Werten ausgehen kann und nicht wie bei border den Rahmen beachten muss.  
>   
> [Box-sizing](https://wiki.selfhtml.org/wiki/Box-sizing) ist dein Freund. Außenabstände sollten die Anzeige der oberen Rahmenlinien sicherstellen.  

Interessant. Versuchs grad mit  
`box-shadow: inset 0 0 1px 1px #888;`{:.language-css}  
Funktioniert auch ganz gut. Aber werde mir das mal ansehen.  
  
Vielen Dank für deine Hilfe

[Matthias Apsel]

Om nah hoo pez nyeetz, Ulrikop!

Richtig, wenn ich die Tabellen-Elemente von html verwenden würde. Da ich das Stylen aber lieber über css mache, kommt hier nur display: table in Frage und die bieten leider keine Multicolumn.

Du kannst auch die Tabellen-Elemente mithilfe von CSS gestalten.

• Der Verlauf der Farbe des Headers soll sich über die beiden Header-Zeilen (Monate und Wochen) hinziehen.
  ein Verlauf für thead sollte es tun.
  Nein, das div head wie es jetzt ist, dürfte nicht gemacht werden.

Ich sprach von der Verwendung von HTML-Tabellenelementen

Matthias

[Gunnar Bittersmann]

@@Ulrikop:

nuqneH

Richtig, wenn ich die Tabellen-Elemente von html verwenden würde. Da ich das Stylen aber lieber über css mache

Ob du im HTML zur Auszeichnung table & Co. verwendest, hat mit dem Stylen nicht das Geringste zu tun. Sondern allein damit, ob du tabellarische Daten hast. Kann man in diesem Fall gelten lassen, also lass den Unsinn mit der div-Suppe! Siehe auch diese Diskussion.

Qapla'