Inzwischen ist das ja altbekannt, wie man mit CSS Farbverläufe als Hintergrundfarbe setzen kann. Mehr als Notiz für mich:
background-color: #4a7aca;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4a7aca', endColorstr='#80a4e0');
background: -webkit-gradient(linear, left top, left bottom, from(#4a7aca), to(#80a4e0)) no-repeat;
background: -moz-linear-gradient(top, #4a7aca, #80a4e0) no-repeat;
background: -o-linear-gradient(top, #4a7aca, #80a4e0) no-repeat;
background: -ms-linear-gradient(top, #4a7aca, #80a4e0) no-repeat;
background: linear-gradient(top, #4a7aca, #80a4e0) no-repeat;
Edit: Noch ein paar mehr Notizen. Hat man wenig Inhalt auf der Seite und setzt den Gradient auf das html-Element, ist untendrunter alles weiß. Zwei Lösungsmöglichkeiten:
html {
...
min-height: 100%
}
Dadurch wird sauber der Gradient nach unten gezogen.
Problematisch aber: Dann den body ebenfalls mit min-height nach unten zu ziehen ist scheinbar nicht möglich. Deswegen die Alternative:
html {
...
height: 100%
background-attachment: fixed;
}
body {
min-height: 80%;
}
Das passt dann von der Positionierung, aber der Gradient sieht immer gleich aus (bei der Scrollseite, an der ich gerade sitze, soll der Farbverlauf mit den Fortschritt vermitteln und daher bleibt es bei der ersten Lösung).
