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.
- Navigate to Customize -> Advanced -> Custom JS & CSS
- 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.
Kelly says:
Hi, Not sure if you’re still answering questions on this article – but I am having an issue with the background image when viewing on a mobile device. The image should be fixed but scrolls with the rest of the website. And it has zoomed in, looking blurry and unattractive.
I tried the above code but it didn’t work. Would appreciate help if you can offer it?
https://covidcandlevigil.com
Brandon says:
Hi Kelly,
Sorry to hear you’re having trouble adjusting your backgrounds for smaller device sizes. You should be able to use the Responsive Utilities inside of Post and Page Builder to add a separate modified image for your smaller screen sizes.
I hope this helps!
Aditya says:
Hi, I have tried using the code as well but my image is still very corrupted and wrongly sized on the mobile version. The Web is looking absolutely fine but the phone isn’t. You can check it out as well on http://www.finocomy.com . I would appreciate your help with this as I need to launch this page in the coming week or so. Thnk you.
Brandon says:
Hi Aditya,
It looks like the fixed scroll functionality is displaying the image in a landscape view and the proportions are not large enough to fit the screen. It may involve reformatting your image size, adding break points for mobile responsiveness, or adjusting the image dimensions to display better on mobile screen sizes. If you reach out with this same question to our Support Forum we would be happy to take a closer look for you.
Heather says:
Hi, Ive been working on this issue and this css worked except for the home page. Is there something I’m missing?
Jesse says:
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?Lydia says:
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
Jesse says:
Hello Lydia-
In order to center the image, modify your existing custom CSS like this:
@media only screenand (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 screenand (max-device-height : 1024px)
and (max-device-width : 1024px) {
.palette-primary.custom-background,
.boldgrid-section.background-fixed {
background-attachment: fixed !important;
background-position: center;
}
}
Olivia says:
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.
Jesse says:
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.