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.
- Duplicate the section that has the parallax background.
- Set the original to show only on Desktop in its visibility settings.
- In the copy, change the background setting from parallax or fixed to a standard option such as Cover.
- Set the copy to show only on Mobile.
- 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?
