CODEWITHSUNDEEP
cssbackground-imagesprite-sheet
Taylor A. Leach
Taylor A. Leach

Reputation: 2324

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

I cannot get my sprites to scale to a smaller dimension. I want it to be like half of the actual size which is 100x100px. How can I scale it with background-size property?

Right now it only shows the full image size of 100x100px...

.my-sprite {
  background-image: url("https://i.sstatic.net/lJpW8.png");
  height: 100px;
  width: 100px;
  background-position: 0 0;
  background-position: -200px 0px;
}
<div class="my-sprite"></div>

Upvotes: 8

Views: 7756

Answers (3)

Yairopro
Yairopro

Reputation: 10324

Generic selection by index + automatic scaling

.sprite {
    --i:0; /* the sprite index */
    --row: round(down, var(--i) / var(--cols), 1);
    
   
    background-image: var(--sprite);
    background-position: calc(var(--i) * -100%) calc(var(--row) * -100%);
    background-size: calc(100% * var(--cols)) calc(100% * var(--rows));
}

.size {
   --size: 0;
   
   width: calc(var(--size) * 1px);
   height: calc(var(--size) * 1px);   
}

div > div {
    display:inline-block;
    border:1px solid;
}
<div style="--sprite:url(https://i.sstatic.net/lJpW8.png); --cols:5; --rows:4">
  <div class="sprite size" style="--i:2; --size:100"></div>
  <div class="sprite size" style="--i:13; --size:150"></div>
  <div class="sprite size" style="--i:16; --size:50"></div>
  <div class="sprite size" style="--i:4; --size:50"></div>
  <div class="sprite size" style="--i:7; --size:200"></div>
  <div class="sprite size" style="--i:22; --size:200"></div>
</div>

Upvotes: -1

user7148391
user7148391

Reputation:

You could 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>

Upvotes: 7

Temani Afif
Temani Afif

Reputation: 272592

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.sstatic.net/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 number, you simply need to do the correct calculation

.my-sprite {
    background-image: url("https://i.sstatic.net/lJpW8.png");
    height:calc(100px / 5);
    width:calc(100px / 5);
    background-position:calc(3/5 * 100px) 0px;
    background-size:calc(500px / 5) calc(400px / 5);
    
    border:1px solid;
}
<div class="my-sprite"></div>

Here is a generic formula using CSS variables for the scale number and also for selecting the icon.

.my-sprite {
    --n:1; /* scaling factor */
    /* coordinates of the image */
    --i:3; 
    --j:0; 

    display:inline-block;
    background-image: url("https://i.sstatic.net/lJpW8.png");
    height:calc(100px / var(--n));
    width:calc(100px / var(--n));
    background-position:calc(var(--i)/var(--n) * 100px) calc(var(--j)/var(--n) * 100px);
    background-size:calc(500px / var(--n)) calc(400px / var(--n));
    
    border:1px solid;
}
<div class="my-sprite"></div>
<div class="my-sprite" style="--n:2;--i:2;--j:2"></div>
<div class="my-sprite" style="--n:3;--i:4;--j:1"></div>
<div class="my-sprite" style="--n:4;--i:1"></div>
<div class="my-sprite" style="--n:5;--j:3"></div>
<div class="my-sprite" style="--n:0.5"></div>
<div class="my-sprite" style="--n:0.8"></div>

Upvotes: 20

Related Questions