Længlich: doppelter Farbverlauf?

Beitrag lesen

Shalom!

Ich versuche gerade einen doppelten Farbverlauf als Hintergrund zu erstellen. Habe also 2 Grafiken (einmal (1) hell -> dunkel und dann (2) dunkel -> hell), möchte die eine (1) am oberen Rand platzieren (repeat-x), darunter durchgehend eine Farbe (background-color:XYZ). Das klappt.
Nun soll die Farbe durch Grafik (2) nach unten wieder auslaufen. Geht das? Wenn ja, wie?

Mit CSS3 wäre das kein Problem, weil damit ein Element mehrere Hintergrundbilder haben können wird. Momentan mußt Du die 2 Hintergründe aber noch 2 verschiedenen Elementen geben.
Was hat denn Dein Element für Kindelemente? Vielleicht ist da ein geeignetes bei. Ich habe mal so etwas ähnliches gemacht, die Strukur sah ungefähr so aus:

  
<div id="content">  
  <h1>Überschrift</h1>  
  <p>Blabla</p>  
  <p>Blabla</p>  
  <p>Blabla</p>  
</div>

In diesem Fall bot sich die Überschrift für den oberen Verlauf an und das div-Element für das andere Hintergrundbild. Daß der Verlauf oben höher war als die Überschrift aussehen sollte, war kein Problem: Das h1-Element bekam einfach eine negative margin-bottom.

Am liebsten wäre mir ja wenn der Effekt von allen 4 Seiten käme (die Farbe zur Mitte hin immer dunkler werden würde).

Könnte auch klappen, wenn die p-Elemente in meinem Beispiel noch mithelfen. ;-)

Die einzige Möglichkeit die mir bis jetzt eingefallen ist wäre sich _ein_ entsprechendes Bild zu basteln und als Hintergrundgrafik zu hinterlegen. Problem: Grafik muss sehr groß sein, damit es nicht irgendwann verpixelt. Falls das die einzige Lösung ist: welches Datei-Format und welche Größe (in px, ca.) empfehlt ihr?

Die Browser skalieren im allgemeinen aber auch nicht besonders schön runter. Ich kann mir vorstellen, daß der Verlauf dann nicht mehr so richtig verläuft und damit unprofessionell aussieht - aber das müßtest Du ausprobieren.

Viele Grüße vom Længlich