CSS Sprites to bardzo użyteczna sztuczka, wykorzystywana na stronach z dużą ilością ikonek i małych grafik, których osobne i każdorazowe ładowanie się znacznie spowalnia działanie strony.

Na wstępie szybko wyjaśnię na czym polega ta metoda. Tworzymy jeden plik graficzny, w którym umieścimy ikonki dla naszej strony, jako przykład wezmę te obok. Następnie utworzymy divy które odnosić się będą do pozycji w naszym obrazku. Jest to bardzo użyteczne, gdy korzystamy z zmiany grafiki po najechaniu na nią [ :hover ]. Podczas pospolitego wykorzystania :hover zdarza się, że grafika nie ładuje się natychmiastowo [ jest zbyt duża wagowo ] i wygląda to dość nieatrakcyjnie.

Więc do rzeczy:

W pliku html umieszczamy nasze przykładowe divy:

<div class="img1"></div>
<div class="img2"></div>

A w kodzie CSS wykorzystujemy CSS Sprites:

.img1{background: url(./img.jpg) 0 0 no-repeat; width: 125px; height: 125px;}
.img1:hover{background: url(./img.jpg) -128px 0 no-repeat;}
 
.img2{background: url(./img.jpg) -128px 0px no-repeat; width: 125px; height: 125px;}
.img2:hover{background: url(./img.jpg) 0 0 no-repeat;}

W efekcie img1 będzie pierwszą ikonką zmieniającą się na tą obok niej. A img2 będzie ikonką nr2 zmieniającą się na tą pierwszą.

Wszystko to za sprawą części -128px 0px:

.img1{background: url(./img.jpg) 0 0 no-repeat; width: 125px; height: 125px;}

Jest ona odpowiedzialna za przesunięcie w pliku i trzeba jej nadać wartość ujemną. -128px oznacza przesunięcie w prawo o 125px, więc jest to oś X. 0px oznacza brak przesunięcia na osi Y.