Fixed background not working on Chromebook

For some reason fixed background does not work on my Pixelbook, but does work on Chrome on Windows.

Check out this page:
http://ar-outline-26bae6.webflow.io/test

Here’s the site:
https://preview.webflow.com/preview/ar-outline-26bae6?preview=015df70c19cc06bf7770d9c2f866d1a6

Hi @chippwalters, Thanks for posting.

We have some javascript in place that prevents fixed backgrounds images from rendering as fixed on touch screen devices, like the Pixelbook. We do this because there are some known repainting css issues caused by fixed background images on elements (it’s also really heavy on CPU’s).

A work around which you can try is set a Fixed element as the background, try the following:

  • Add in a div, call it “Fixed background” (or whatever you wish)
  • Set the div to Position: Fixed
  • Width: 100%, Height: 100vh (type in 100vh so that it takes up the full viewport)
  • Adjust the z-index of this element to sit behind all other elements

I hope this helps! :bowing_man:

1 Like

GREAT! Works as advertised.

Is there a way to adjust the z-index so that it’s BEHIND everything w/out having to assign a z-index to everything else?

1 Like

You should be able to set a negative z-index for your background to make sure it’s behind your other elements.

1 Like

Sweet. A very big thank-you for your support and this superb web-application!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.