Hello everyone,
Picture this: a sprite image named icons.png linked to the css class .icons, featuring various 10x10px graphics. Now imagine needing another class that enlarges these sprite graphics exactly twice their size, making them 20x20 pixels on the screen.
Is there a way to achieve this enlargement solely using CSS?
Any tips would be greatly appreciated!
.icons, .iconsbig{ /* CURRENT SETUP */
background-image:url(http://site.org/icons.png);
background-repeat:no-repeat;
vertical-align: middle;
display: block;
height:10px;
}
.iconsbig{ /* make this one twice as big as the original sprite */
background-repeat:no-repeat;
height:20px;
background-size: 20px auto;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
update:
challenges with the code above:
- It functions in IE9, but not in FireFox. Why can't the most popular browser resize it properly?
- In IE9, the enlarged image appears fuzzy and far from pixel-perfect like nearest neighbor scaling should be.