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;
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]-->