Seitenhintergrund mit Gradient

[joe]

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

[Gunnar Bittersmann]

@@joe:

nuqneH

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.

Du möchtest 'background-attachment' auf "fixed" setzen?

Qapla'

[joe]

@@joe:

nuqneH

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.

Du möchtest 'background-attachment' auf "fixed" setzen?

Qapla'

jepp... das wollte ich wohl ;) Danke! manchmal sieht man den Wald vor lauter Bäumen nicht. Hatte schon mal versucht das 'fixed' mit hinter die gradient-Anweisung zu schreiben, was leider nicht funktioniert hat. Aber wenn mans extra schreibt, gehts.

[Gunnar Bittersmann]

@@joe:

nuqneH

Hatte schon mal versucht das 'fixed' mit hinter die gradient-Anweisung zu schreiben, was leider nicht funktioniert hat.

Natürlich hat "fixed" nichts im Wert der 'background-image'-Eigenschaft zu suchen.

Wenn du aber die zusammenfassende Eigenschaft 'background' [CSS2 §14.2.1] verwendest, kannst du natürlich alles in einer Deklaration angeben.

Qapla'