Why does a fixed background-image move when scrolling on IE?

the1900 picture the1900 · Jan 15, 2015 · Viewed 24.6k times · Source

I'm trying to make background-image fixed.

As you see in my blog, the background-image is moving when scrolling on IE 11.

How can I fix this?

This is my CSS:

background-image: url("./images/cover.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

Answer

twicejr picture twicejr · Feb 29, 2016

My final fix is based on all the answers I've found:

On the main css for Edge / ie11 / ie10

/*Edge*/
@supports ( -ms-accelerator:true ) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}
/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}

For ie9, ie8 and ie7 I've added the code (without media query) in a separate hacksheet:

<!--[if lte IE 9]>
    <style type=text/css>
       html{
           overflow: hidden;
           height: 100%;    
       }
       body{
           overflow: auto;
           height: 100%;
       }
    </style>
<![endif]-->