CSS-Sprites

[Alice]

Hallo.

Ich arbeite seit einiger Zeit mit den sogenannten Sprites.

Bis jetzt habe ich nur normale Grafiken (Buttons usw.) als Sprites erstellt.

Wie sieht es denn aber mit Grafiken aus, die sich wiederholen? Hat man damit keine Chance Sprites zu erstellen? Sollte ja auch mit den wichtigsten Browsern funktionieren.

Danke.

 

[Jan-Frederik Stieler]

Hi,
was meinst du genau mit Grafiken die sich wiederholen?
Falls du die Verwendung von repeat bei Sprites meinst so kann man dies nicht mit einem klaren ja oder nein beantworten.
Die Lösung befindet sich in einem kleinen Trick:

1. erstelle zwei Spritedateien, eine für repeat-x (repeat-x.png) und eine für repeat-y (repeat-y.png)
2. in repeat-x.png kommen nun alle Bilder untereinander und in der repeat-y.png nebeneinander
3. Background-repeat verwenden

Viele Grüße

 

[Alice]

Hallo.

Danke für die Beschreibung.

Zwei Fragen.

Ich verwende zu 99% repeat-x. Muss die repeat-x.png Grafik speziell aufgebaut sein? Also bis auf den Punkt das alle Grafiken untereinander sein müssen. Die 1. Grafik ist 900px breit. Die nächste ist dann aber nur 150px breit. Schlimm? Wo positionieren in der Grafik?

Wie sieht es mit dem Befehl "repeat" aus? Also ohne x oder y.

Ich benutze schon seit anfang an immer "Background-repeat".

 

[Jan-Frederik Stieler]

Hi,
repeat ist nur shorthand für Background-image

background: transparent url(../xyz.png) repeat-x)

Wenn du ein Bild in x- und y-Achse wiederholen willst lass einfach repeat weg.

Die 1. Grafik ist 900px breit. Die nächste ist dann aber nur 150px breit. Schlimm?

Schlimm ist das nicht. Je nachdem wie groß dann dein HTML-Element ist hast du Abstände drinnen.
Hier kannst du sehen was dann passiert: http://jsbin.com/evijew/1/edit