Bende alternatif bir bakış açısı getiriyim konuya :)

CSS Sprite ın mantığı sitedeki tüm resimler tek tek yüklenmek yerine tek resim yükleyip CSS background position ile tek resimde tüm görselleri göstermek oluyor..

Sistemde bi tane sprite diye div oluşturun ve background tanımlayın.

Yani;

.sprites {
background-image : url(resim/sprite.png);
background-color : transparent;
background-repeat : no-repeat;
display:inline-block;
}

diye..

Ardından örnek olarak konu arkaplanı olan bir öğede yani .konu divinde bir arkaplanımız vardı (sprite öncesi konu.png iken onu kaldırıyoruz)

.konu_png {
height : 25px;
width : 25px;
background-position : -25px -0px;
}

şeklinde oluşturulan kodumuzu

.konu + .sprites + .konu_png olarak 3 farklı css şablonunu tek css şablonunda topluyoruz.

yapıyoruz örnek olarak.

Background repeat özelliğini konu CSS inden silmeyin..Repeat özelliği spritela bir sorun çıkartmaz ama konu da silerseniz tekrarlama sorunu çıkabilir karşınıza..Sadece background-image kısmını silip sprite ve konu_png tanımlarını alın..