I need background image sprites to resize according to the width of their container, without showing the whole sprite, and background-size:100% accomplishes this, like so:
#featured ul.icon-controls li.prevention {
background:url(img/ico1.png) no-repeat;
background-size:100%;
height:60px;
width:50px;
background-position: 0 -113px;
}
But, alas, I have to support IE8, which does not support background-size. I've found scripts like backgroundSize.js, which force IE8 to render background-size:cover and background-size:contain, but those don't work for sprites. And I need to use a sprite for the various states of each icon (hover/active/inactive).
Is there anything I can do -- hacky solutions are ok given my desperation!
Here is a fiddle of my full code: http://jsfiddle.net/Pw7fL/