title: background-size with background-position doesn't scale the position?
body: <p>I've a sprite of 62 images of 91 * 91px, which makes the whole thing 91 * 5642 px. They're displayed in sort of a dynamic grid that grows and shrinks depending on user/pointer movement. Sometimes an element (std 91 * 91 px) zooms in to make it 120 * 120 px. Obviously I want the background to grow with so that the entire 91 * 91 px image is shown in the entire 120 * 120 element.</p>
  
  <p>Enter <code>background-size: 100% auto</code> to make the width always perfect. Problem now is that <code>background-position</code> expects its values to be updated as well! All 62 elements have inline <code>style=background-position etc</code>. I can't update the background position from inline. I want the background to first position and then resize (zoom), not resize and then position (zoom to wrong position).</p>
  
  <p>I'm not sure I'm making any sense. To clarify somewhat:</p>
  
  <ul>
  <li>All elements have a style of <code>width: 91px; height: 91px; background-size: 100% auto;</code>.</li>
  <li>The second image would have an inline style of <code>background-position: 0 -91px</code>.</li>
  <li>When you hover that element it gets a style <code>width: 120px; height: 120px;</code> and then it shows most part of the 2nd image and some part of the 1st, because positioning happens after resizing =(</li>
  <li>If I change the background-position (after zoom/hover) to <code>0 -120px</code>, it aligns correctly. (But then obviously it's wrong when not zooming/hovering.)</li>
  </ul>
  
  <p>A very easy solution would be to use actual <code>zoom: 1.3</code> or <code>transform: scale(1.3)</code>, but that's VERY VERY slow with transitions.</p>
  
  <p>I must be missing something. CSS has to be smarter than this. A sprite with background-size... That's not impossible is it!?</p>
  
  <p>How the sprite looks is up to me, so I could make it have a 120 * 120 grid instead of 91 * 91, if that would be simpler...</p>
  
  <p><strong>EDIT:</strong> With example fiddle: <a href="http://jsfiddle.net/rudiedirkx/g4RQx/" rel="noreferrer">http://jsfiddle.net/rudiedirkx/g4RQx/</a></p>
  
  <p><strong>Smart answer 1:</strong> <code>background-position: 0 calc(100% / 61 * 2)</code> (61 because 62 images, 2 because 3rd image)</p>