Scale CSS sprites to background images: a guide

Question

.my-sprite {
  background-image: url("https://i.stack.imgur.com/lJpW8.png");
  height: 100px;
  width: 100px;
  background-position: 0 0;
  background-position: -200px 0px;
}

<div class="my-sprite"></div>

I can't get my sprite to scale to a smaller size. I want it to be like half the actual size i.e. 100x100px How can I scale it using the background-size property? Now it only shows the full image size of 100x100px...

Answer 1

You can use transform:scale().

.my-sprite {
  background-image: url("https://picsum.photos/id/217/200/300");
  height: 100px;
  width: 100px;
  background-position: -200px 0px;
  transform: scale(.3);
}

<div class="my-sprite"></div>

Answer 2

The dimensions of your image sprite are 500x400, so if you want to reduce the background-size by 2, define half that size and then adjust the background-position to get Any icon you want:

.my-sprite {
    background-image: url("https://i.stack.imgur.com/lJpW8.png");
    height:50px;
    width:50px;
    background-position:150px 0px;
    background-size:250px 200px;
    
    border:1px solid;
}

<div class="my-sprite"></div>