Background-size pixels polyfil for IE8? - internet-explorer-8

Question

I need to make CSS3's background-size properly work in IE8. There are a lot of javascript libraries out there but they extend the options "cover" and "contain" rather than a px value. As I'm using an image sprite I need to set the background size in pixels.
Here is a demo of my code. The sprite image is 600px 400px but ive set the background size to be 300px x 200px so that is looks crisp on high density displays.
<a class="one">Link one</a>
<a class="two">Link two</a>
a {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 58px;
height: 58px;
background: url("https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png");
background-size: 300px 200px;
} a.one {
background-position: 0 0;
}
a.two {
background-position: 0 -56px;
}
http://jsfiddle.net/rr2obdss/4/
Can I extend support to IE8 without having to create and maintain a 2nd image sprite?

Answer 1

Depending on the specific case, which you don't really explain in much detail, a workaround with pseudo elements may work?
Just add a pseudo element of the specified size and have it have the sprite as background?
With the right combination of position absolute/relative and z-index this could work.
If you provide more information of what exactly you are trying to achieve I will be able to provide better help.
Edit:
Okay, so I got a solution now. Kind of as expected: looks quite dirty.
But that's what you get when you want to do fancy stuff in IE8 :-P
a {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 58px;
height: 58px;
position: relative;
}
a:before {
content: "";
background: url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png);
zoom: .5;
text-indent: 0;
overflow: hidden;
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
a.one:before {
background-position: 0 0;
}
a.two:before {
background-position: 0 -112px;
}
The downside of this is, that you would have to calculate the zoom factor instead of just writing down the dimensions you want to have. Also background-position would then be in relation to the full-size background.
Is anything unclear with what I am doing in above code?

Answer 2

The only thing you can do is to :
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale')";
But this can cause issues if you use sprite image.

Answer 3

According to caniuse.com, this polyfill may help.
Hope this helps...
-- Lance