CSS Sprites e sfondi ripetuti

Mi piacerebbe conservare tutte le mie piccole immagini in un file di sprite, ad esempio:

inserisci la descrizione dell'immagine qui

Supponiamo ora di voler aggiungere una sottile immagine di sfondo che ha lo scopo di ripetere x oltre il 100% della larghezza di un elemento:

inserisci la descrizione dell'immagine qui

Questo deve essere memorizzato come quadro separata o posso in qualche modo memorizzarlo nell’immagine dello sprite? Non riesco a capire se è ansible fare una ripetizione in background su una sezione di uno sprite, penso di no, ma sono abbastanza sicuro di averlo visto da qualche parte.

Non sono sicuro che sia già in CSS3, ma il motore Gecko (Firefox 4 …) aggiunge image-rect come -moz-image-rect che consente di selezionare una parte specifica di un’immagine per l’utilizzo. Con questo puoi selezionare una parte del tuo sprite come immagine di sfondo e poi ripeterla.

Tuttavia non è sicuramente diffuso o standard.

Quello che mi piace fare è fare 3 tipi di sprite. Uno con icone, in cui non si usano affatto le ripetizioni, una per le immagini a ripetizione orizzontale e una per le immagini a ripetizione verticale.

In questo modo puoi aggiungere diversi sfondi da ripetere a uno sprite, ma non avere così tanto fastidio nell’usarlo.

Dovresti renderlo a tutta larghezza dell’immagine sprite. Altrimenti potrebbe perdere altre immagini o spazio quando viene ripetuto.

Ricorda che ripetere immagini di sfondo molto piccole (larghezza 1-2px) può avere un impatto terribile sulle prestazioni: è sempre meglio usare immagini un po ‘più grandi per questo, anche se sarebbe troppo piccolo – in realtà può essere meglio il rendering delle pagine saggio di 1px ampio.

EDIT: (riguardo la tua modifica)

Se il tuo elemento è ad altezza fissa puoi metterlo sulla larghezza dello sprite al 100% della larghezza dello sprite con l’altezza massima richiesta dell’elemento. Oppure, se sai che la sua larghezza massima è minore della larghezza dello sprite, rendi un rettangolo con la larghezza e l’altezza massime del tuo elemento.

Se non conosci l’altezza massima e vuoi metterla in cima, in modo che il gradiente si attenui in un colore solido, puoi farlo se metti la tua immagine ripetuta nella parte inferiore dello sprite e la posizioni con lo background-position: 0px -300px valore superiore negativo background-position: 0px -300px dove 300px è la distanza dalla parte superiore del tuo sprite alla parte superiore dell’immagine di sfondo sul tuo sprite.

Guarda qui come google posizionato ripetuto BG su uno sprite:

google sprite