IE8 Background-size issue

Question

I'm currently building a parallax site, it works on all browsers apart from the exception of IE8 due to using background-size.

I have tried ms filters just wondering if anyone else has a solution.

section {
width: 100%;
position: relative;
overflow-x: hidden;
z-index: 0;

}

.parallax__one {
background: url("../Images/parallex__bg__1.png") 0px 0 no-repeat fixed;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(     src='../Images/parallex__bg__1.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../Images/parallex__bg__1.png', sizingMethod='scale')";
    /* background size */
    -webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;

}

I found this great site called stack overflow http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie — DavidB, Jan 14 '13 at 11:11
js.background won't work as it uses an image with a z-index but due to making a parallax effect it has to be set as a background in the css — user1970409, Jan 14 '13 at 11:25
@user1970409 faced with the same problem. Did you find any solutions? — Tamara, Jan 21 '14 at 14:41

score 0 · Accepted Answer · answered Mar 19 '14 at 22:15

background-size does not work in IE8

You will have to use something like this polyfill.

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

Instructions from the readme:

Upload backgroundsize.min.htc to your website, along with the .htaccess that will send the mime-type required by IE (Apache only — it's built in nginx, node and IIS).

Everywhere you use background-size in your CSS, add a reference to this file.

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

The elements styled this way should have a position: relative; or position: fixed; and a z-index. If not, they will be given a position: relative; and z-index: 0;.

IE8 Background-size issue

1 Answers1

Instructions from the readme: