title: responsive sprites / percentages
body: <p>I've read every single question about responsive sprites using css, I saw jsfiddle with working examples of responsive sprites, but I still cannot understand how to get the percentage of background-position and of background-size, how to use a wrapper (some people say it is necessary) around the div that uses background-image and why to use it... <br>
  For instance, if I have a div that has width:20% (say 40px) and is a circle. The image I need to use as background-image has 80px width (a circle, and I need to resize it to fit my div) and is one of the 40 images I have in my sprite sheet. It is at the position -173px -293px.<br>
  I really have no clue how to make it work.<br>
  I tried:</p>
  
  <pre><code>div {
    width:20%;
    border-radius:50%;
    background: url('images/sprites.png') no-repeat 72.083% 67.981%;
    background-size: 50%;
    }
  </code></pre>
  
  <p>Of course, it did not work. I don't understand how to get the background-position-x, background-position-y (the numbers I have are from the "auto" size sprite sheet) when the background-size is not auto, or how the background-size relates to the percentage of the div size. <br>
  Is there any mathematical formula that I can use? Can anyone please explain me or give me a name of some website/book where I can learn it? <br>
  Thanks,</p>