Search code examples
cssinternet-explorerbackground-imageinternet-explorer-11

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

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

  • This is a known bug with fixed background images in Internet Explorer. We recently did some work to improve this behavior and have shipped updates to our preview build of Internet Explorer on Windows 10. You can test the changes today from Mac OS X or Windows on http://remote.modern.ie.

    Below is the before and after, IE 11 and IE Remote Preview. Notice how scrolling with the mouse-wheel no longer causes the fixed background image to jump (or jitter) as it did in Internet Explorer 11.

    enter image description here