Background-size IE7 & 8 CSS hack

Question

I know background-size isn't supported for IE7 and IE8. I also know there is a solution of using AlphaImageLoader as below:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='image.gif', sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
             src='image.gif', sizingMethod='scale')";

But unfortunately its not working. Any suggestions?

Here is my code in CSS:

.useBGImage { 
    background-image: url('../img/BGImage.gif'); 
    background-size: 400px 50px; 
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='../img/BGImage.gif', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
                 src='../img/BGImage.gif', sizingMethod='scale')";
}

The original size of the image is 400px * 70px.

Answer 1

My suggestion would be to use one of the available polyfill libraries to solve this.

There are two that I can think of which would fit the bill:

• CSS3Pie
• https://github.com/louisremi/background-size-polyfill

Of these, CSS3Pie covers a load more functionality than just background-size, so would be good if you're also doing similar filter styles for gradients, etc. The other one is a one-trick polyfill just for this specific feature.

Both are known to work well, so pick whichever you prefer, and throw away those ugly filter styles.