Last updated on

All browsers are not created equal and occasionally something will look correct on your Desktop PC but appear wildly different on your iPhone, especially in the case of background image resizing.

This sometimes happens due to some of the problems that iOS mobile browsers have when a fixed background image position is combined with the cover-page background size.  The following custom CSS code will remove the fixed position property for your website and section backgrounds when viewed on mobile devices, allowing the background images to resize correctly when your website is viewed on iOS mobile devices.

  1. Navigate to Customize -> Advanced -> Custom JS & CSS
  2. Paste the following code into your Custom Theme CSS box
@media only screen 
and (max-device-height : 1024px) 
and (max-device-width : 1024px) {
    .palette-primary.custom-background,
    .boldgrid-section.background-fixed {
        background-attachment: scroll !important;
    }
}

Congratulations, you now know how to fix the display of your background images for iOS devices!

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

6 thoughts on “How to Fix Background Image Resizing Problems

    • Hi Heather-
      I sent a reply over on your support forum topic but it looks like you’ve got “fixed” instead of “scroll” on your Custom CSS rule, which would still have the same issue. Can you update your Custom CSS to use background-attachment: scroll !important; instead of fixed?

  1. My background image still isn’t centering and stops halfway down the page. Is there a way to manually modify the area of the picture that is seen? I could zoom in and have the height greater than the width so it looks better on iPad/iphone. Right now it looks professional on the desktop but not on ipad/iphone my website is 303c-m.com

    • Hello Lydia-
      In order to center the image, modify your existing custom CSS like this:
      @media only screen
      and (max-device-height : 1024px)
      and (max-device-width : 1024px) {
      .palette-primary.custom-background,
      .boldgrid-section.background-fixed {
      background-attachment: scroll !important;
      background-position: center;
      }
      }

      If you need the image to continue down into your page content, change the word “scroll” to “fixed,” like this:
      @media only screen
      and (max-device-height : 1024px)
      and (max-device-width : 1024px) {
      .palette-primary.custom-background,
      .boldgrid-section.background-fixed {
      background-attachment: fixed !important;
      background-position: center;
      }
      }

  2. But WHERE exactly do you paste this code? Which files? I can’t fix it so the main photo background image on my front page displays on all devices EXCEPT iPhones.

    • Hello Olivia-
      I took a moment to update this article to be more clear. Rather than using this code in a file, navigate to Customize -> Advanced -> Custom JS & CSS and paste the code into your Custom Theme CSS field.

Leave a Reply

Your email address will not be published. Required fields are marked *