cssinternet-explorer-8internet-explorer-7background-imagebackground-size

Background-size IE7 & 8 CSS hack

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.

Solution

  • 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:

    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.