CSS background attachment fixed fix for chrome 67

9
votes

I just wanted to post a quick question concerning any parallax background image that has dissapeared upon the new version 67 chrome update.

Currently there are two fixes that I have found online that work.

Are there any others that may work better, and can anyone let me know why the new version of chrome 67 is making background fixed images disappear?

You can add the following transform properties below to your element that contains a background image with fixed attachment. reference(1)

yourdiv {
position:relative;
background-image:url(your_image);
background-size:cover;
background-position:center;
background-attachment:fixed;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}

OR you can change the position to static of the element with the background fixed image. reference(2)

yourdiv {
position:static;
background-image:url(your_image);
background-size:cover;
background-position:center;
background-attachment:fixed;
}

Hope this helps for now and thank you in advance for any answers posted.

1
cssgoogle-chromeparallax
Stack Overflow is a Question and Answer site. I would recommend reformatting your post in the form of a question and submitting your own answer. - Chase Ingebritson
nice solution, but a question/answer format would have been nice too - Akber Iqbal
Sound good I will edit it in the form of a question.. - Digggid

1 Answers

4
votes

add style 

will-change: transform;
background-attachment: fixed;