joe: Seitenhintergrund mit Gradient

Beitrag lesen

Hallo.
ich möchte mittels der gradient-Eigenschaft einen Farbverlauf auf dem Seitenhintergrund erzeugen. Dazu habe zwei Möglichkeiten ausprobiert:
1.)

body{  
  background-color: #555555;  
  background-image: -moz-linear-gradient(top, #555555, #dddddd) ;  
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #555555),color-stop(1, #dddddd));  
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#dddddd');  
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#dddddd')";  
  
}

2.)

html{  
  background-color: #555555;  
  background-image: -moz-linear-gradient(top, #555555, #dddddd) ;  
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #555555),color-stop(1, #dddddd));  
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#dddddd');  
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#dddddd')";  
}

Das Problem der ersten Methode ist, dass, wenn der Viewport größer als der Inhalt ist, der Verlauf an der Unterkante des Inhalts aufhört und dann neu beginnt (was eher unschön aussieht).

Ist der Inhalt kleiner als der Viewport, funktioniert die zweite Methode wunderbar, ist der Inhalt aber größer, so hat der Verlauf nur die Höhe des Viewports und es werden mitunter mehrere Verläufe untereinander angezeigt.

Der IE8 zeigt diesen Fehler in der zweiten Methode nicht.

mfg