.my-sprite { background-image: url("https://i.stack.imgur.com/lJpW8.png"); height: 100px; width: 100px; background-position: 0 0; background-position: -200px 0px; }
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 thebackground-sizeproperty? Now it only shows the full image size of 100x100px...
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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); }The dimensions of your image sprite are 500x400, so if you want to reduce the
background-sizeby 2, define half that size and then adjust thebackground-positionto 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; }