Fixed background image on mobile without JavaScript

Community resources Webflow Tips
1

@An4tomic1
I have found a great solution for fixed backgrounds on mobile devices requiring no JavaScript at all.

body:before {
content: “”;
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(photos/2452.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

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

2 Likes
2

I’ve found solutions too. And I realized why it’s not supported on mobile : the performances are horrible. A simple page with fixed bg on an iPhone 6S Plus scrolls very jiggy very often.

The solution you outline here may work better because it’s not using a fix bg but a fixed element. And that may have a difference in rendering performances. ← a good 75% of chances I’m saying a lot of crap here, but for example fixed menus aren’t a problem on mobile.

3

Been struggling with fixed background for mobile. Tried your code but got buggy results.

I have tried so many solutions now, nothing seems to work :confused:

Any suggestions?

4

Hi Vincent,

I am very interested in your workarounds for this. I’ve tried a few but not getting the desired effect at all. (fixed just doesn’t seem to be supported on safari mobile at all). I’m working with CMS items which makes the main workaround, totally unusable (the one where you build a new element for your BG image, set it to fixed witha z-index of -1 so other object can scroll over…).

Any help would be hugely appreciated :slight_smile: