• User Attivo

    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?


  • User Attivo

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


  • User Attivo

    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:
    image


  • User Attivo

    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


  • User Attivo

    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.

    image


  • User Newbie

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


  • User Attivo

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