Fixed or Parallax Background Not Showing on a Phone

A background image set to scroll with a parallax effect may look fine on a computer but fail to display on an iPhone or iPad. This is a limitation in how iOS browsers draw fixed backgrounds, not a problem with your page. Android phones, Chromebooks and Windows devices display it correctly.

Workaround

Give phones their own section that uses a different background style.

  1. Duplicate the section that has the parallax background.
  2. Set the original to show only on Desktop in its visibility settings.
  3. In the copy, change the background setting from parallax or fixed to a standard option such as Cover.
  4. Set the copy to show only on Mobile.
  5. Save, publish and test on an actual phone.

Tips

  • Use a high-quality image that still looks good when cropped.
  • Check text contrast over the image on small screens.
  • Test in more than one browser.

Good to know: Duplicating content for mobile can double your editing work later, so keep the content identical and change only the background.

Was this article helpful?