Fixed background image rendering on phones

Hey Guys,

Apparently the phones can’t render background image positions set to fixed (parallax scrolling), the image is fixed when rendering on the computer, but loses that value when opening the page on the phone. Both android and iphones have these problems.

would anyone know a code I could insert to make it possible?

Thank you.

Hey @peakerskyrs,

Please post your Webflow share link so I can take a look.

hi @nwdsha Thanks for the help,

My preview link is here https://preview.webflow.com/preview/davidfive?preview=edb31bee2aeeb1ef0092237c5f866af3

You could also visit http://davidfive.webflow.io/ on your phone to see what I meant by the image not having parallax scrolling. It works on the computer, but doesn’t work on the phone. I’ve looked through other forums and have emailed the webflow support, and it seems that writing a custom code is the only way to solve the issue.

Thank you so much!

hello again @nwdsha do you think its something fixable?

Hey @peakerskyrs,

I’m finding out for you :slight_smile:

Hi, @peakerskyrs, as far as I know, this is a browser thing in mobile browsers.

Maybe you have a look here.

http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7

And i found this, what also could be a solution:

 /* Cross browser solution for fixed full background image (incl. iOS) */
 
body {
  position: relative;
}
 
.pagebg-container {
  background: url('/path/to/background-image.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;  
  position: fixed;
  width: 100%;
}

Hope this helps.

hello @pupinko thank you for the code, I am facing some problems trying to work it out the background URL from my webflow site, but I’ll see what I can do to fix it!

Thanks again,

Parallax and fixed Image are not supported on mobile!

I’ve tried adding an id to reference the page container, and also wrote the right URL path to the img, but it doesn’t seem to work. The image disappears when i set the code inside the custom code section.

thank you for your help anyways! :slight_smile:

Hey @peakerskyrs,

Found what you’re looking for :slight_smile: Different Parallax effects possible with Webflow (no custom code required)

Big thanks to @sabanna for coming up with it.

Hope it helps.

Hey @nwdsha

Thanks for the reply.

The problem I’m trying to solve currently is to fix the background image on mobile.

But I’m afraid the example sabanna set up, also doesn’t work on mobile.

Thank you for your support anyhow! :smiley:

1 Like

No problem @peakerskyrs - Happy to help anytime :smiley: