Sprite image sorunu nasıl çözerim?

  width: 120px; height: 20px;    background: url('css_sprites.png') -150px -118px;

  background: url(ankaragucu.png) left no-repeat #fff;  background-position: 1px 9px;

Ankaragücü ikonun 1. koddaki gibi sprite ile çekmek istiyorum ama css_sprites.png den gelen ankaragücü ikonu üste yapışıyor. background-position: vermek istediğim de başka iconlar geliyor sprites dosyasından. Nasıl yapırım?
Padding verdim oda yemedi.

https://www.w3schools.com/css/css_image_sprites.asp buradaki örnekler belki işinizi görür

sprite css in en büyük handikapı background-position sorunudur. Ben bu sorunu background olarak vermeden before yada after özelliğiyle aşıyorum. Bunlarıda kullanmak istemiyorsanız resmi yada ikonu farklı bir resim olarak kaydedip kullanın.

Vertical-align ile yapacaksınız.

Örnek: vertical-align: -10px;

Ekleme: Ya da jsfiddle üzerine ekleyin kodları oradan düzeltme yapayım.