CSS Sprites per immagini con repeat

darkf3d3

CSS Sprites per immagini con repeat

Sto cercando di raggruppare tutte le icone ed immagini che compongono la grafica del blog utilizzando i css sprites, il problema è che non riesco a capire come applicare lo stesso procedimento alle immagini con il repeat-x o repeat-y. Sapete se c'è modo di farlo?

py

Immagino che una ricerca sul quel motore di ricerca sconosciuto (chiamato google) l'hai già fatta, giusto?

darkf3d3

Si, però da quel che ho letto sembrerebbe che funzioni solo con immagini che hanno la stessa altezza o larghezza, in pratica se devo applicare a tutte il repeat-x basta che faccio un immagine con la loro larghezza e le affianco verticalmente, stessa cosa per il repeat-y ma in questo caso vanno affiancate orizzontalmente.

Il problema è che io vorrei aggiungere inserirla in un immagine di questo tipo:

py

Per farla semplice: salva dentro un file zip tutte le immagini (separate) e genera il sprite css usando questo tool: it.spritegen.website-performance.org

darkf3d3

Forse non ho spiegato bene il problema.
Le immagini le ho già riunite io all'interno di un file e ho già anche creato il css relativo, qui un esempio:


.heading-author { background:url(images/social.png) 0 43px; padding-left:20px; }
.heading-date { background:url(images/social.png) 0 28px; padding-left:20px; }
.heading-comments { background:url(images/social.png) 0 14px; padding-left:24px; }

Il mio problema riguarda in particolare le immagini che hanno un attributo repeat.
Se prendiamo come esempio l'immagine qui sotto (indicata dalla freccia rossa) alta 40px e larga 2px, volendola applicare come sfondo di un div di pari altezza (40px) però largo 300px, anche dandogli l'attributo repeat-x come risultato otterrò quell'immagine solo una volta perché prima di ripetersi visualizzerà tutto lo spazio vuoto presente (a destra) nell'immagine contenitore.

gionaf

@DARKF3D3 said:

Il mio problema riguarda in particolare le immagini che hanno un attributo repeat.
Se prendiamo come esempio l'immagine qui sotto (indicata dalla freccia rossa) alta 40px e larga 2px, volendola applicare come sfondo di un div di pari altezza (40px) però largo 300px, anche dandogli l'attributo repeat-x come risultato otterrò quell'immagine solo una volta perché prima di ripetersi visualizzerà tutto lo spazio vuoto presente (a destra) nell'immagine contenitore.

Purtroppo per ripetete orizzontalmente quella frazione di immagine, devi allargarla per tutto lo sprite...
Guarda questo sprite utilizzato da Facebook per esempio: s-static.ak.fbcdn.net/rsrc.php/v2/y7/x/IJYgcESal33.png
Al centro c'è un'immagine che occupa tutta la larghezza...

darkf3d3

Ecco, allora avevo letto bene su google, funziona solo se l'immagine occupa tutta la larghezza/altezza dell'immagine contenitore... grazie per l'aiuto.