How to reuse a css background sprite for icons of different sizes?

Question

I merged a set of icons into one .png file and use css background-position to show these icons on a page, because img tags make a lot more http requests.

However, I need to show every icon in 2 different sizes: 20x20, 60x60. How can I do this without creating 2 separate .png files (20x400 and 60x1200)?

I am aware of the background-size property to scale the background image, but it is introduced in css3 and IE doesn't support it before 9.0.

Is it possible without using background-size?

Answer 1

The best way to do this is using "font icon technology" - you can read all about this in the web. Also it is helps when you need your markup retina compatible

Answer 2

Since you cannot use background-size for compatibility reasons you could try having both small and large versions of the icons in the same image. How you group them is up to you, but you should do some testing whether the increased size of the image still results in an acceptable load time for your pages.

+1 for icon fonts. You can do some pretty fancy things with them e.g. http://forecastfont.iconvau.lt/

Answer 3

I think that you could use "background:size" property. With it, you can "visually re-scale" background image.

Please look here