title: Resize image from sprite using CSS
body: <p>I have a CSS sprite with various icons in size 32x32px.</p>
  
  <p>Now what I need is to display one of those icons in 20x20px size. I tried a few things, like setting the size to 20px, using background-size:cover, or using transform:scale(0.625) - but none of my attempts give the result I desire.</p>
  
  <p>HTML for my tests:</p>
  
  <pre><code>32px icons:
  
  &lt;div class="sprite" style="background-position:0px 32px;"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="sprite" style="background-position:64px 32px;"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="sprite" style="background-position:32px 96px;"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="sprite" style="background-position:0px 0px;"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="sprite" style="background-position:32px 64px;"&gt;&amp;nbsp;&lt;/div&gt;
  
  &lt;hr&gt;
  20px icons (attempts):
  
  &lt;div class="sprite" style="background-position:32px 64px; width:20px; height:20px;"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="sprite" style="background-position:32px 64px; width:20px; height:20px; background-size:cover;"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="sprite" style="background-position:32px 64px; width:20px; height:20px; transform:scale(0.625);"&gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>CSS for my tests:</p>
  
  <pre><code>.sprite {
    background-image:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png);
    width:32px;
    height:32px;
  }
  </code></pre>
  
  <p>Please have a look at this fiddle to see what I tried:</p>
  
  <p><a href="https://jsfiddle.net/dfqh0yrc/4/" rel="noreferrer">https://jsfiddle.net/dfqh0yrc/4/</a></p>