Hintergrund mit css

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Grafik als Fallback für Browser, die SVG-Hintergrund nicht unterstützen:

Ähm, SVG ist selbst nur Fallback für die reine CSS-Lösung.

Also für Firefox Rastergrafik setzen, für den 4er jedoch mit SVG überschreiben.

Papperlapapp! Firefox kann Gradienten!! Webkits auch. Chrome mittlerweile auch in der Mozilla-Syntax. Opera mittlerweile auch.

Also einfach zwei Gradienten mit harten Farbübergang per background-position und background-size wirkungsvoll in Szene gesetzt …

Problemtatisch ist das Setzen von background-size, das nur bei den Gradienten wirken soll. Das müsste also innerhalb der Deklaration als <bg-position>/<bg-size> angegeben werden. Dummerweise versteht das nur Opera. Und glücklicherweise versteht das Opera, denn -o-background-size versteht er nicht. Also für Firefox und Webkits background-size mit Präfixen setzen, sonst stört es die Größe im IE 9.

Voilà!! Test 4

Ich hab ein bisschen umgefärbt, damit man sieht, was Sache ist:
blau: Das ist old school: Rastegrafik (IE < 9)
grün: Da sind wir im grünen Bereich: SVG (IE 9)
rot:  Hot! Gradienten (Firefox, Webkits, Opera)

Qapla'