How to scale CSS sprites when used as background-image?

Your image sprite has a dimension of 500×400 so define half this size if you want to reduce by 2 on the background-size 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> You can decrease more by any scale … Read more