Kako podesiti CSS sprajtove na wordpress sajtu?

Radio sam analizu brzine sajta na http://gtmetrix.com/. Taj alat pokazuje da treba da napravim CSS sprajtove za slike od teme. 

Čitao sam razna uputsva na engleskom, ali s obzirom da ne znam baš najbolje engleski, ne mogu da skapiram kako se to tačno radi. 

Koristio sam ovaj alat http://timc.idv.tw/canvas-css-sprites/en/ za pravljenje css sprajtova. Taj alat je napravio sliku i CSS kod koji treba da otpremim na sajt.

Napravljenu sliku sam otpremio u direktorijum:  public_html/wp-content/themes/periodic/images/backgrounds

CSS kod sam dodao u fajl: /public_html/wp-content/themes/periodic/style.css

Da li je ovo ispravno uradjeno i ako nije gde grešim?

E hvala, skontao sam kako da podesim putanje slika. S obzirom da mi je nastao haos izgleda je potrebno i prilagodjavanje CSS koda.

Sa ovim alatom za kreiranej CSS sprajtova dobio sam ovakav kod:

.sprite {display: block; background: transparent url('...') no-repeat; text-indent: -10000px; }

.http { background-position: 0 0; width: 10px; height: 62px}

.http { background-position: -12px 0; width: 4px; height: 4px}

.http { background-position: 0 -64px; width: 620px; height: 5px}

.http { background-position: 0 -71px; width: 10px; height: 10px}

.http { background-position: 0 -83px; width: 320px; height: 5px}

.http { background-position: 0 -90px; width: 13px; height: 12px}

.http { background-position: -15px -90px; width: 2px; height: 4px}

.http { background-position: -19px -90px; width: 5px; height: 8px}

.http { background-position: -26px -90px; width: 5px; height: 8px}

Ovo su slike za koje sam napravio CSS sprajtove:

http: //saznajlako.com/wp-content/plugins/extended-tags-widget/images/t-black-right.png http: //saznajlako.com/wp-content/themes/periodic/images/backgrounds/bg-body.gif http: //saznajlako.com/wp-content/themes/periodic/images/backgrounds/bg-home-columns.gif http: //saznajlako.com/wp-content/themes/periodic/images/backgrounds/bg-rss.png http: //saznajlako.com/wp-content/themes/periodic/images/backgrounds/bg-sidebar.gif http: //saznajlako.com/wp-content/themes/periodic/images/backgrounds/comment-bubble.png http: //saznajlako.com/wp-content/themes/periodic/images/backgrounds/pipe-mainnav.gif http: //saznajlako.com/wp-content/themes/periodic/images/backgrounds/purple-arrow.png http: //saznajlako.com/wp-content/themes/periodic/images/backgrounds/white-arrow.png

Ovako izgleda originalan CSS kod od slike images/backgrounds/bg-sidebar.gif

 
#column-container{position:relative;width:960px;background:#fff url(images/backgrounds/bg-sidebar.gif) repeat-y top right;padding:20px 0 0} #column-container-left{position:relative;width:960px;background:#fff url(images/backgrounds/bg-sidebar.gif) repeat-y top left;padding:20px 0} #column-container-wide{position:relative;width:960px;background:#fff;padding:20px 0}

Ovo sam ja izmenio:
Original: images/backgrounds/bg-sidebar.gif

Zamenjeno: images/backgrounds/canver.png

Šta je još potrebno da izmenim u ovom kodu da bi sve funkcionisalo ok?

PS. trenutno sam vratio originalni CSS fajl, jer sve je bio u haosu. Cim skontam sta je jos potrebno podesiti u CSS fajlu podesicu putanje. Uglavnom putanje sam skontao kako se podesavaju.