Hintergrund mit css

[Gunnar Bittersmann]

@@Tom74269:

nuqneH

Mittels Inline-Angaben in @style-Attributen möchtest du das wirklich nicht realisieren. Alle Darstellungsangaben gehören ins Stylesheet.

Aber an meinem Problem würde das nichts ändern, oder verstehe ich dich jetzt falsch?

An diesem Problem nicht. Aber mit Inline-Styles schaffst du dir haufenweise anderer Probleme (Wartbarkeit, Wiederverwendbarkeit).

Ähm, was hast du gegen eine nur wenige Byte große Grafikdatei im GIF- oder PNG-Format?

Naja, auch als Vektorgrafik werden es nur wenige Byte sein. Eine solche bietet den Vorteil, dass sie in allen Zoom-Stufen perfekt aussieht.

Hm, Skalieren von Grafiken mit ausschließlich horizontalen und vertikalen Kanten sollten Browser doch halbwegs hinbekommen, oder? Würde ein Pixel Rosa zwischen Rot und Weiß den Hintergrund zur Unschärfe verschwimmen lassen?

Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.

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

body  
{  
  background: url(quadrate.png) repeat-x;  
  background: url(quadrate.svg) repeat-x, url(quadrate.svg) repeat-x;  
}

Browser, die multiple Hintergrundbilder unterstützen, bekommen SVG; die anderen eine Rastergrafik.

Dummerweise bleibt Firefox 3.6 dabei auf der Strecke, da er multiple Hintergrundbilder unterstützt, aber keine SVG-Hintergrundbilder.

Also für Firefox Rastergrafik setzen, für den 4er jedoch mit SVG überschreiben. Muss sich nur noch ein Selektor finden, den der 3.6er nicht kennt … da ha’m wa’n ja:

body, x:-moz-any-link  
{  
	background: url(quadrate.png) repeat-x;  
}  
  
body:not(:indeterminate), x:-moz-any-link  
{  
	background: url(quadrate.svg) repeat-x;  
}

Test 3

Qapla'