Tom74269: Hintergrund mit css

Beitrag lesen

Hi und vielen Dank für die Kommentare!

Nun möchte ich dies nicht mittels eines quadrate.gif und

<body style="background-image:url(quadrate.gif);background-repeat:repeat-x"> ...</body>

realisieren,

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

Natürlich ist es sinnvoll den Hintergrund global in einem Stylesheet zu definieren. Aber an meinem Problem würde das nichts ändern, oder verstehe ich dich jetzt falsch?

Ä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.

sondern würde die quadrate.gif gerne als Vektorgrafik via css und <div> aufbauen:

<div style="position:absolute; left:0px; top:0px; width:100px; height:100px;">

<div style="position:absolute; left:0px; top:0px; width:50px; height:50px; background:red;"></div>
  <div style="position:absolute; left:50px; top:50px; width:50px; height:50px; background:red;"></div>
</div>


>   
> Das in eine Vektorgrafik übersetzt sieht so aus:  
>   
> ~~~xml

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  

> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1" width="100" height="100">  
>   <rect x="0" y="0" width="0.5" height="0.5" fill="red"/>  
>   <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="red"/>  
> </svg>

Speichern als quadrate.svg und im Stylesheet einbinden:
body { background: url(quadrate.svg) repeat-x }

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

Grüße
Tom