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.
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:
|
.mobile, .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:
|
.tablet,
.mobile {
height: 100%;
overflow: hidden;
}
.tablet body,
.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
Style Your Mobile Navigation
We offer up a robust selection for your site's mobile navigation. Your site comes with a mobile navigation that will match the template you picked. You will find all customization options for your navigation within the Design tool. 1. Select the ...
Add a Background/Custom Background to Your Website Page
You can customize the background for specific pages on your website by following these steps: 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 ...
Fully Stretch Background Image 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. ...
Change the Background of a Content Block
Give your background a splash of color by following these steps to modify the transparency and shades of your background: 1. Select Design in the navigation bar, and locate the page you’d like to change the background color for. On the right-hand ...
Customize the Height of Your Image Gallery
All of our slideshow Image Gallery blocks have customizable Height attributes that can be set to Auto, Adjust manually or Fit to window. These design features are great for photographers or those trying to include a portfolio on their site. Design ...