Why is my background image much bigger/distorted/upscaled on phones and tablets?
Due to the complex aspect of the inter-compatibility of desktop and mobile devices, your background image may display bigger, distorted, or upscaled when set to fixed or parallax scroll options. However, we have a few advanced fixes available for you to try on your site.
To complete these steps, you will need Developer permissions enabled.
Option 1: Your first option will set your background image to the scroll option. Paste this code into the CSS box in the Developer tools panel, then press Save and Publish:
|
html.mobile, html.tablet { background-attachment: scroll; } |
Option 2: Your second option is just another approach at making your background image scroll on mobile or tablet. Note that one known issue with this option may cause background images set on blocks to fail to render. Paste this code into the CSS box in the Developer tools panel, then press Save and Publish:
|
html.tablet, html.mobile { height: 100%; overflow: hidden; } html.tablet body, html.mobile body { height: 100%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } |
Note: You may experiment with these codes on your site, however, it isn't guaranteed it'll fix the issue.