How to Scale an Image in a CSS Sprite

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

Your image sprite has a dimension of 500x400 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>

Resize images from sprite

You can use the background-size property in css3:

background-size: 50% 50%;

Resize image from sprite using CSS

You can only use the scale without width and height like the following:

.sprite {  background:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png);  width:32px;  height:32px;}

32px icons:<div class="sprite" style="background-position:0px 32px;"> </div><div class="sprite" style="background-position:64px 32px;"> </div><div class="sprite" style="background-position:32px 96px;"> </div><div class="sprite" style="background-position:0px 0px;"> </div><div class="sprite" style="background-position:32px 64px;"> </div><hr>20px icons (attempts):<div class="sprite" style="background-position:32px 64px; transform:scale(0.625);"> </div><div class="sprite" style="background-position:32px 64px; transform:scale(calc(20 / 32));"> </div>

How can I scale sprite sheet images to a container?

You were almost there, just need to specify some values in %.

Run the snippet below in fullscreen and resize:

.striped-background {  position: relative;  max-width: 1400px;  padding: 37.143% 0 0; /* 520px is 37.143% from 1400px so we keep the aspect ratio */  background: url("https://imgur.com/7sSDRKV.png") no-repeat 0 0 / cover;}
#blue-section div {  position: absolute;  width: 6.6%; /* 92px is 6.6% from 1400px */  padding: 6.6% 0 0;  cursor: pointer;  background-image: url("https://imgur.com/8L1Y4SS.png");  background-size: 556.522%;   /* the width of your sprite is 512px where 460px for 5 symbols (92px each)  and the rest of the space is for unnecessary extra space.   So if there was no extra space, background-size would be 500% (100% for 5 symbols)  but we have to multiply this number to 512/460 what gives us 556.522%  */}
#AAAA {  left: 4.5%;  top: 15%;  background-position: 0.476190% 0.476190%;}
#BBBB {  left: 15.05%;  top: 15%;  background-position: 22.8571% 0.476190%;}
#CCCC {  left: 36.16%;  top: 15%;  background-position: 45.2381% 0.476190%;}
#DDDD {  left: 46.72%;  top: 15%;  background-position: 67.6190% 0.476190%;}
#EEEE {  left: 9.77%;  top: 65%;  background-position: 90.0000% 0.476190%;}
#FFFF {  left: 20.33%;  top: 50%;  background-position: 0.476190% 22.8571%;}
#GGGG {  left: 20.33%;  top: 80%;  background-position: 22.8571% 22.8571%;}
#HHHH {  left: 30.88%;  top: 40%;  background-position: 45.2381% 22.8571%;}
#IIII {  left: 30.88%;  top: 65%;  background-position: 67.6190% 22.8571%;}
#JJJJ {  left: 41.44%;  top: 65%;  background-position: 90.0000% 22.8571%;}
#KKKK {  left: 57.27%;  top: 30%;  background-position: 0.476190% 45.2381%;}
#LLLL {  left: 57.27%;  top: 65%;  background-position: 22.8571% 45.2381%;}
#MMMM {  left: 78.38%;  top: 40%;  background-position: 45.2381% 45.2381%;}
#NNNN {  left: 67.83%;  top: 40%;  background-position: 67.6190% 45.2381%;}
#OOOO {  left: 73.11%;  top: 15%;  background-position: 90.0000% 45.2381%;}
#PPPP {  left: 83.66%;  top: 15%;  background-position: 0.476190% 67.6190%;}
#QQQQ {  left: 88.94%;  top: 40%;  background-position: 22.8571% 67.6190%;}
#RRRR {  left: 83.66%;  top: 65%;  background-position: 45.2381% 67.6190%;}
#SSSS {  left: 73.11%;  top: 65%;  background-position: 67.6190% 67.6190%;}

<div class="container-fluid striped-background">  <div id="blue-section">    <div id="AAAA"></div>    <div id="BBBB"></div>    <div id="CCCC"></div>    <div id="DDDD"></div>    <div id="EEEE"></div>    <div id="FFFF"></div>    <div id="GGGG"></div>    <div id="HHHH"></div>    <div id="IIII"></div>    <div id="JJJJ"></div>    <div id="KKKK"></div>    <div id="LLLL"></div>    <div id="MMMM"></div>    <div id="NNNN"></div>    <div id="OOOO"></div>    <div id="PPPP"></div>    <div id="QQQQ"></div>    <div id="RRRR"></div>    <div id="SSSS"></div>  </div></div>

Scaling an image sprite, using percentage: Possible?

If you'd want a simple fix without worrying about crossbrowser-issues, I'd suggest to use a normal image.

Next, one could use data URIs or use a combo of zoom for webkit/ie and -moz-transform:scale for Firefox or finally break your head on background-size calculations.

You might also want to read: How can I scale an image in a CSS sprite

Hope this helps!

Resize background image sprite component using CSS

add this  transform: scale(0.5);

div {  background-attachment: scroll;  background-clip: border-box;  background-image: url("https://www.designworkplan.com/content/3-read/8-free-vector-arrows/designworkplan_vector_arrow_collection-01.png");  background-origin: padding-box;  background-position: -55px -44px;  background-size: auto;  box-sizing: border-box;  display: block;  font-size: 11px;  height: 276px;  line-height: 15px;  position: absolute;  transform: scale(0.5);  left: 20px;  top: 20px;  width: 276px;}

<div></div>