How do I make a fixed background?

Design help General
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

Jacob and Debbie's Acro Patreon Lessons 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;
}

image
image245×518 12.4 KB

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).