Farbverlauf in der Hintergrundfarbe

[Heiko]

Hi!

Ich habe da mal ne (vieleicht dumme) Frage! Kann ich in HTML der Hintergrundfarbe einen Farbverlauf (z.B. von schwarz nach blau) zuordenen. Wenn ja wie geht das? Wenn nein gibt es andere Möglichkeiten so etwas darzustellen?

Danke für eure Hilfe!

Heiko

[lulu]

Huhu Heiko

einen horizontalen Farbverlauf kannst Du mit einer Grafik machen.

Diese muss entsprechend breit sein, damit sie bei höheren Auflösungen über die gesamte Bildschirmbreite geht.
Also z.B. Größe 1400x20 Pix und in der Grafik der Farbverlauf von  Grün nach Schwarz oder was auch immer.

Die Grafik dann im body-Tag als Hintergrund-Bild einbinden.

Viele Grüße

lulu

[Sven Rautenberg]

Huhu Heiko

einen horizontalen Farbverlauf kannst Du mit einer Grafik machen.

Du wirst lachen: Ein vertikaler Farbverlauf funktioniert auch mit einer Grafik. :)

Diese muss entsprechend breit sein, damit sie bei höheren Auflösungen über die gesamte Bildschirmbreite geht.

...oder man begrenzt die Endloswiederholung per CSS: background-repeat:repeat-y (</selfhtml/css/eigenschaften/hintergrund.htm#background_repeat>).

Also z.B. Größe 1400x20 Pix und in der Grafik der Farbverlauf von  Grün nach Schwarz oder was auch immer.

Wenn man die Hintergrundfarbe entsprechend der Randfarbe des Verlaufs wählt, kriegt man mit den meisten Browsern keinerlei Darstellungsprobleme. Nur Netscape 4 haut aus der Reihe.

Die Grafik dann im body-Tag als Hintergrund-Bild einbinden.

...per CSS eingebunden ist viel schöner:
background-image:url('pfadzurdatei'); (</selfhtml/css/eigenschaften/hintergrund.htm#background_image>).

- Sven Rautenberg

[Rol]

Hi

Kann ich in HTML der Hintergrundfarbe einen Farbverlauf (z.B. von schwarz nach blau) zuordenen.

Nein.

Wenn nein gibt es andere Möglichkeiten so etwas darzustellen?

Nehme ein Hintergrundbild. Schmal (nur 3-5pixel) und hoch für einen vertikalen Verlauf und "ziehe" es auf die ganze Breite auf.

Rol

P.S. Ich habe das schon bei einigen Sites machen wollen, ging auch, sah aber meist total besch***en aus. Liegt aber vielleich an meinen persöhnlichen Designer(un)fähigkeiten.

[Sven Rautenberg]

Moin!

Nehme ein Hintergrundbild. Schmal (nur 3-5pixel) und hoch für einen vertikalen Verlauf und "ziehe" es auf die ganze Breite auf.

Wenn schon, dann sollte das Hintergrundbild genau 8 Pixel breit oder hoch sein.

Grund: Das JPG-Format zerlegt das Bild in 8x8 Pixel große Blöcke. Ich würde meinen, es gibt Kompressionsvorteile, wenn man diese Blockgröße ausnutzt. Und JPG ist natürlich als Speicherformat Pflicht bei Farbverläufen. GIF kann da einpacken.

- Sven Rautenberg

[Ed X]

Hi Sven,

Nehme ein Hintergrundbild. Schmal (nur 3-5pixel) und hoch für einen vertikalen Verlauf und "ziehe" es auf die ganze Breite auf.

Wenn schon, dann sollte das Hintergrundbild genau 8 Pixel breit oder hoch sein.

Grund: Das JPG-Format zerlegt das Bild in 8x8 Pixel große Blöcke. Ich würde meinen, es gibt Kompressionsvorteile, wenn man diese Blockgröße ausnutzt. Und JPG ist natürlich als Speicherformat Pflicht bei Farbverläufen. GIF kann da einpacken.

bei den 8 pixeln gehe ich mit, auch wenn du gif nimmst, dort brauchst
du es fürs dithering.
Allerdings würde ich gif nicht gleich aus dem Rennen schießen, denn ein
gut gedithertes bild zeigt imho weniger streifen als ein selbst niedrig
komrimiertes jpeg. nich hauen, habe gerade keinen webspace zur hand...

MIME-Version: 1.0
Content-Type: application/octet-stream; name="v.jpg"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="v.jpg"

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
IHfICkVCBZj6H9Ga7gjVBdjRXJecXNZTrr//2Q==

MIME-Version: 1.0
Content-Type: application/octet-stream; name="v.gif"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="v.gif"

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

bye eddie