How can I scale an image in a CSS sprite

by

2021 Update: Background size is supported by most major browser but if your mobile browsers doesn’t support it use zoom.

You could use background-size, as its supported by most browsers (but not all http://caniuse.com/#search=background-size)

background-size : 150% 150%;

Or

You can use a combo of zoom for webkit/blink/ie and transform:scale for Mozilla(-moz-) and old Opera(-o-) for cross-browser desktop & mobile

[class^="icon-"]{
    display: inline-block;
    background: url('../img/icons/icons.png') no-repeat;
    width: 64px;
    height: 51px;
    overflow: hidden;
    zoom:0.5;
    /* Mozilla support */
    -moz-transform:scale(0.5);
    -moz-transform-origin: 0 0;
}

.icon-big{
    zoom:0.60;
    /* Mozilla support */
    -moz-transform:scale(0.60);
    -moz-transform-origin: 0 0;
}

.icon-small{
    zoom:0.29;
    /*  Mozilla support */
    -moz-transform:scale(0.29);
    -moz-transform-origin: 0 0;
}

More Related Contents:

  1. Smallest data URI image possible for a transparent image
  2. Tools to make CSS sprites? [closed]
  3. Can I add color to bootstrap icons only using CSS?
  4. Clip/Crop background-image with CSS
  5. CSS scoped custom property ignored when used to calculate variable in outer scope
  6. Hide text node in element, but not children
  7. How and where to use ::ng-deep?
  8. How to use ‘hover’ in CSS
  9. A grid layout with responsive squares
  10. Is it possible to create an angled corner in CSS?
  11. How to make CSS visible only for Opera
  12. CSS rule based on content [duplicate]
  13. What does + mean in CSS? [duplicate]
  14. How can I apply multiple transform declarations to one element?
  15. Float right and position absolute doesn’t work together
  16. Converting and rendering web fonts to base64 – keep original look
  17. Why doesn’t inset box-shadow work over images?
  18. text-overflow ellipsis on flex child not working [duplicate]
  19. Make HTML5 video poster be same size as video itself
  20. Why does stacking order change on webkit filter hover?
  21. css text gradient
  22. Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
  23. Can I have different colored left and top borders in CSS?
  24. Safe width in pixels for printing web pages?
  25. Difference between flex-end and end? [duplicate]
  26. CSS text align justify big spaces
  27. Purpose of *:before, *:after rule without content property
  28. How do I make card-columns order horizontally?
  29. Disable CSS animation on pseudo element inherited from parent
  30. Why does enabling hardware-acceleration in CSS3 slow down performance?

Leave a Comment