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

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -