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

by

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

.my-sprite {
    background-image: url("https://i.stack.imgur.com/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.stack.imgur.com/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>

More Related Contents:

  1. How to apply a CSS filter to a background image
  2. Using percentage values with background-position on a linear-gradient
  3. How do I combine a background-image and CSS3 gradient on the same element?
  4. Can I have multiple background images using CSS?
  5. CSS3 background image transition
  6. Responsive css background images
  7. Semi-transparent color layer over background-image?
  8. How to reference JSF image resource as CSS background image url
  9. How can I force browsers to print background images in CSS?
  10. Changing Background Image with CSS3 Animations
  11. Is embedding background image data into CSS as Base64 good or bad practice?
  12. How to add a color overlay to a background image? [duplicate]
  13. IE 8: background-size fix [duplicate]
  14. CSS background-size: cover + background-attachment: fixed clipping background images
  15. How to rotate the background image in the container?
  16. Using HTML data-attribute to set CSS background-image url
  17. Google Chrome Extensions – Can’t load local images with CSS
  18. Disable antialising when scaling images [duplicate]
  19. Google chrome a:visited background image not working
  20. CSS blur on background image but not on content [duplicate]
  21. CSS: background image on background color
  22. Symfony2 – Assetic – load images in CSS
  23. Background images: how to fill whole div if image is small and vice versa
  24. Overlay a background-image with an rgba background-color
  25. Animate CSS background-position with smooth results (sub-pixel animation)
  26. Full background image with fade effect
  27. CSS: background image does not fill when scrolling
  28. CSS background image URL failing to load
  29. Issues with “background-position” in “background” shorthand property
  30. (Really) Long Background Image Does Not Render on iPad Safari

Leave a Comment