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

Question

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

Answer 1

I tried twicejr's CSS solution but it is not working in Edge/15.15063. Dasha's answer solved the problem in Edge but not IE 11. I noticed that the document.documentMode condition was not complete. document.documentmode will return undefined for all browsers except for IE 8+ which will return the mode number. With that, the following code will detect both IE 8+ and Edge and solve the background image problem.

if ((document.documentMode != undefined) || (/Edge/.test(navigator.userAgent))) {
document.documentElement.style.overflow = "hidden";
document.documentElement.style.height = "100%";
document.body.style.overflow = "auto";
document.body.style.height = "100%";}

JS Fiddle for the above code. This also works with arrow key and track-pad scrolling. I didn't give any consideration to IE7-