Background-size pixels polyfil for IE8?

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