Stretching Background Image in IE 8 and Below - css

Question

I want to load an image via css that stretches to the entire screen. The css:
body {
background: url(images/reelgoodguide2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: auto;
margin: 0px;
padding: 0px;
}
Which works perfectly in Chrome and Firefox and IE9.
There is a conditional in the html to include an additional css file if the browser is IE8 or IE7. This css contains:
body{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale')";
}
But instead of alphaimageloader stretching the image to the entire screen, the image remains centered and it and does not resize.
Note: when I open developer tools I can see that the css file is there. When I disable the filter property, nothing happens. Any tips to what Im doing wrong?
Thanks in advance.

Answer 1

OKAY... After a grueling bit of fiddling, this is what i figured out:
First:
 The filter path to an image is relative to the html document, not the css file. FRUSTRATING
Second:
  I got this to work by applying the filter to html instead of body.
I had read that the IE workaround were not to be applied to html but what I noticed was that there was (after I had cleared up the image path problem) a stretched bacground image but it was behind everything else.

Answer 2

I think it's not possible with CSS alone. Search for supersized. You will find some JavaScript libs.

Answer 3

One more useful answer to solve IE8 background issue is:
Download backgroundsize.min.htc and put it inside your project.
Now simply add these lines in your css:
.class_name{
//your other properties
background-size: cover;
-ms-behavior: url(backgroundsize.min.htc);
}
NOTE: use the url according to your project setup.
Enjoy this simple solution. :)