Resimleri CSS sprite görseller içinde birleştirin

merhaba,
https://developers.google.com/pagespeed/ adresini kullanarak wordpress ile oluşturduğum blogumu test ettim ve "Resimleri CSS sprite görseller içinde birleştirin" uyarısı aldım.
bunun üzerine CSS Sprite Generator | Project Fondue adresini kullanarak

.sprite-background{ background-position: 0 0; width: 2px; height: 76px; } 
.sprite-cik{ background-position: 0 -126px; width: 66px; height: 11px; } 
.sprite-cizgi5{ background-position: 0 -187px; width: 1px; height: 45px; } 
.sprite-date{ background-position: 0 -282px; width: 16px; height: 16px; } 
.sprite-featured-next{ background-position: 0 -348px; width: 37px; height: 37px; } 
.sprite-featured-pager{ background-position: 0 -435px; width: 12px; height: 124px; } 
.sprite-featured-prev{ background-position: 0 -609px; width: 37px; height: 37px; } 
.sprite-ftbg{ background-position: 0 -696px; width: 9px; height: 191px; } 
.sprite-menu-primary-bg{ background-position: 0 -937px; width: 2px; height: 252px; } 
.sprite-menu-secondary-bg{ background-position: 0 -1239px; width: 2px; height: 180px; } 
.sprite-search{ background-position: 0 -1469px; width: 16px; height: 16px; } 
.sprite-widget-list{ background-position: 0 -1535px; width: 9px; height: 7px; }

kodlarını elde ettim.
bu kodları blogumda tema editörünü kullanarak style.css bölümünün en altına kopyaladım.

CSS Sprite Generator | Project Fondue adresinin bana verdiği birleştirilmiş resmi de kendi sunucumda image klasörüne yükledim. sorun şu ki bundan sonra ne yapacağımı bilmiyorum. sanırım birleştirilmiş resmin url'sini bir yerlere kopyalama gerek. ama nereye? yapacaklarımı bana söylerseniz sevinirim. teşekkürler.

http://spriteme.org/

Bu adresten yararlanarak daha sağlıklı bir çalışma yapabilirsin. "Run Sprite Me" butonunu yer imi olarak ekle ve sprite edeceğin sayfada adrese git, karşına gelen paneldeki yönergeleri izle.

öncelikle kodun bu şekilde olacak.
ve örneğin burdaki classların herhangi birinde hangi arkaplanı kullandıysa o classı gorselın bulanması ıstedıgı yere vericeksin.
Örneğin resmin içinde takvim iconu var. takvim iconunun görunmesını istediğin div 'e o classı ekleyeceksin anlatabildimmi ?

.sprite-background{ background-image:url(RESİMYOLU);  background-position: 0 0; width: 2px; height: 76px; } 
.sprite-cik{ background-image:url(RESİMYOLU);  background-position: 0 -126px; width: 66px; height: 11px; } 
.sprite-cizgi5{ background-image:url(RESİMYOLU);  background-position: 0 -187px; width: 1px; height: 45px; } 
.sprite-date{ background-image:url(RESİMYOLU);  background-position: 0 -282px; width: 16px; height: 16px; } 
.sprite-featured-next{ background-image:url(RESİMYOLU);  background-position: 0 -348px; width: 37px; height: 37px; } 
.sprite-featured-pager{ background-image:url(RESİMYOLU);  background-position: 0 -435px; width: 12px; height: 124px; } 
.sprite-featured-prev{ background-image:url(RESİMYOLU);  background-position: 0 -609px; width: 37px; height: 37px; } 
.sprite-ftbg{ background-image:url(RESİMYOLU);  background-position: 0 -696px; width: 9px; height: 191px; } 
.sprite-menu-primary-bg{ background-image:url(RESİMYOLU);  background-position: 0 -937px; width: 2px; height: 252px; } 
.sprite-menu-secondary-bg{ background-image:url(RESİMYOLU);  background-position: 0 -1239px; width: 2px; height: 180px; } 
.sprite-search{ background-image:url(RESİMYOLU);  background-position: 0 -1469px; width: 16px; height: 16px; } 
.sprite-widget-list{ background-image:url(RESİMYOLU);  background-position: 0 -1535px; width: 9px; height: 7px; }

güzel anlatim