html - Scaling Down Sprite Images in web pages -
i have web page. web pages references 1 image file called sprites.png. file has of images in 1 file. in side of file have image 48px x 48px; i'm referencing in css this:
.cell-back { height:36px; width:36px; border-radius:18px; background-color:green; } .play { width:48px; height:48px; background: url('/img/sprites.png') -437px 234px; }
in web page, have:
<div class="cell-back"> <div class="play"></div> </div>
as can imagine, "play" sprite larger space. i'd "play" image 24px x 24px centered within cell-back. but, haven't figure out how scale down sprite image.
is there way that?
thank you!
you have add background-size
it. way can scale shown image.
.play { width: 48px; height: 48px; background-image: url('/img/sprites.png'); background-position: -437px 234px; background-size: 24px 24px; }
Comments
Post a Comment