Streaming live at 10am (PST)

Fixed background image on mobile without JavaScript


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)


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.


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?