Streaming live at 10am (PST)

How do I make a fixed background?


#1

I am having a problem with my background. I want it to be fixed, so no scrolling. It does this in the designer but when I publish and look at my site with my laptop or phone the background does scroll. Why is this? I have included a share link.

https://preview.webflow.com/preview/jacob-and-debbie-acro?preview=11d9b01f5d36d62d3a228af8175edbf3

Website is
www.jacobanddebbieacro.com

www.jacobanddebbieacro.com/patreon is doing it the worst in mobile portrait mode.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

You set the styles to scroll change to fixed

.body-class {
    /* change this */
    background-attachment: scroll;
}

https://www.w3schools.com/CSSref/tryit.asp?filename=trycss_background-attachment

mobile and fixed (some issues):


#3

The article says

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled

Is that really true? Fixed backgrounds are a problem for mobile browsers? That means I cant use fixed backgrounds at all because I need my website to work with mobile portrait.

Is there a way I can make all backgrounds fixed except for mobile portrait?


#4

Yes by breakpoints (change to this breakpoint and change to scroll).