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.
Related Articles
Adjust the Container's Background Color/Opacity
1. Select Design in the gray navigation bar. 2. Navigate to your desired page using your site's navigation 3. On the righthand side, select the "Page" tab 4. Select the block title that you're changing 5. From here, find the Container dropdown near ...
Fully Stretch Background Image/Images for Content Blocks
You can add a fully stretched background to your content blocks by following these steps: 1. Select the Design tool in the gray navigation bar. Under the Sitewide tab in the design options on the right-hand side of the preview, select Styles. 2. ...
Fully Stretch Background Image for Buttons
You can add a fully stretched background to your button by following these steps: 1. Select the Content tool in the gray navigation bar. 2. Select the Page where your button is. 3. Click on the Design this page in the sidebar on your right. 4. Select ...
Customize the Background of a Page
You can customize the background for specific pages on your website. Change a page background 1. Select the Design tool in the gray navigation bar, or the blue Design this page button on your Content page to enter the Design tool. Navigate to the ...
Image Ratio Options
New updates give users the ability to have even more control over image sizes within their website! Now, for beneath the Image > Style > Shape design options, you'll see even more ratio options for your images. These image ratio sizes are available ...