Background-size IE7 & 8 CSS hack - css

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.

Answer 2

According to microsoft's own documentation sizingMethod='scale'
Scale
          Stretches or shrinks the image to fill the borders of the object.
As you can see scale is a poor choice of words to use since it doesn't really "scale" it merely stretches and/or shrinks the image to fit the boundaries of its container.
To effectively scale an image proportionately it is recommended that you remove the height and width of the image in the HTML markup.
Then use this as your CSS...
.useBGImage {
background-image: url('../img/BGImage.gif');
background-repeat: no-repeat;
width: auto; /* required for IE8 */
max-width: 100%;
height: auto;
}