Eu li todas as perguntas sobre sprites responsivos usando css, vi o jsfiddle com exemplos úteis de sprites responsivos, mas ainda não consigo entender como obter a porcentagem de posição e tamanho do plano de fundo, como usar um wrapper (alguns as pessoas dizem que é necessário) em torno da div que usa a imagem de fundo e por que usá-la ...
Por exemplo, se eu tiver uma div que tenha largura: 20% (digamos 40px) e seja um círculo. A imagem que eu preciso usar como imagem de fundo tem largura de 80px (um círculo e preciso redimensioná-la para caber na minha div) e é uma das 40 imagens que tenho na minha planilha de sprites. Está na posição -173px -293px.
Eu realmente não tenho idéia de como fazê-lo funcionar.
Eu tentei:

div {
  width:20%;
  border-radius:50%;
  background: url('images/sprites.png') no-repeat 72.083% 67.981%;
  background-size: 50%;
  }

Claro, não funcionou. Eu não entendo como obter a posição do plano de fundo x, posição do plano de fundo y (os números que tenho são da folha de sprite de tamanho "automático") quando o tamanho do plano de fundo não é automático ou como o tamanho do plano de fundo refere-se à porcentagem do tamanho da div.
Existe alguma fórmula matemática que eu possa usar? Alguém pode me explicar ou me dar um nome de algum site / livro onde eu possa aprender?
Obrigado,