Streaming live at 10am (PST)

Fixed background not working on Chromebook


#1

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


#2

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:


#3

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?


#4

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


#5

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


#6

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