Wer seine Website lieber ohne aufwändige Grafiken gestaltet und dabei für einen schönen Verlauf die Funktion Linear-Gradiant verwendet, stößt schnell auf das Problem das ich vor Kurzem hatte: der Hintergrund geht nur bis zum Ende des Content der Website. Das schaut ziemlich ungünstig aus je nachdem wie lang die Seite ist.
Ich habe daraufhin lange gesucht um eine passende Lösung zu finden und bin glücklicherweise auch irgendwann fündig geworden, musste vorher aber einiges durchprobieren. Beispielsweise gaben einige Hobby-Designer den Ratschlag ein Div als Hintergrund zu nehmen und diesem die 100.01% Größenangabe zu geben, jedoch führt das lediglich zu unschönen Ergebnissen. Linear-Gradiant lässt sich auch nicht zwingen eine Mindestgröße zu haben, da es keinem definierten Bereich wie beispielsweise einem div entspricht.
Die Lösung ist simpel und ebenfalls per CSS zu hinzubekommen:
folgender Code (mit euren Werten versteht sich) verhilft zum Erfolg mit derzeit allen gängigen Browsern in den neuesten Versionen:
html {
min-height:100%;
background-image: linear-gradient(to bottom, #000000 0%, white 80%);
}
Nicht vergessen die alte Stelle an welcher euer Farbverlauf war zu löschen!