I am working on a web page that contains an image file called sprites.png. This file holds multiple images within it. Specifically, there is one image in the file that is 48px x 48px. In my CSS, I am referencing this image like so:
.cell-back {
height:36px;
width:36px;
border-radius:18px;
background-color:green;
}
.play {
width:48px;
height:48px;
background: url('/img/sprites.png') -437px 234px;
}
Within my web page, I have structured it as follows:
<div class="cell-back">
<div class="play"></div>
</div>
The "play" sprite displayed is larger than the actual space available. I would like to have the "play" image centered within cell-back at 24px x 24px. However, I am unsure of how to scale down my sprite image.
Is there a way for me to achieve this?
Thank you!