Scaling Down Sprite Images in web pages
<p>I have a web page. This web pages references one image file called sprites.png. This file has all of the images in one file. In side of this file I have an image that is 48px x 48px; I'm referencing it in my css like this:</p>

<pre><code>.cell-back {
  height:36px;
  width:36px;
  border-radius:18px;
  background-color:green;
}

.play {
    width:48px;
    height:48px;
    background: url('/img/sprites.png') -437px 234px;
}
</code></pre>

<p>In my web page, I then have:</p>

<pre><code>&lt;div class="cell-back"&gt;
  &lt;div class="play"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>As you can imagine, the "play" sprite is larger than the actually space. I'd really like for the "play" image to be 24px x 24px centered within cell-back. But, I haven't figure out how to scale down my sprite image.</p>

<p>Is there a way to do that?</p>

<p>Thank you!</p>