- Posts
I just started using Boldgrid Resolve theme – the site background image with parallax scroll does not scale properly or consistently to iPhone devices. It does not look like in the mobile preview – and it changes depending on which page I’m viewing. On a page where I have no content, it appears to scale properly. On a page where I have content, including the home page the image is not at all visible (as if it’s zoomed in to full size, and you only see a tiny segment of it). Seems to only occur on iPhones. How do I fix that?
Hi Alex-
We have seen another report of this behavior on iPhones, and it seems to be related to how iOS Safari treats the CSS “cover” background image size.
Here’s how we fixed it for that user. Navigate to Customize > Advanced > Custom CSS & JS, and paste the following code into your Custom Theme CSS:
@media (max-width: 991px) { body.custom-background { background-size: cover !important; max-height: 100vh; background-position: center top !important; } }That didn’t work – all it did was change to a static background image but the image size (zoom) was completely different on each and every page on my website. It was the same problem in Safari and using the Google app. It actually made it look worse because you could tell something was wrong, whereas right now it’s just basically a blur and you can’t tell what you’re looking at really.
Hi Alex,
Forgive me for the wrong answer. Because of the current work-from-home situation, I didn’t have access to our office’s iOS devices to test this. I’ve gotten one now and I was able to test this to make sure it works for you:@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 top !important; } }Thanks – almost there, but I think there’s still an issue
As I scroll down on mobile, the background image awkwardly scales larger a few times and scales back down as I scroll back up. It’s pretty weird / distracting. Probably better if completely static, if the parallax scroll will not work.
Hi Alex-
That does sound weird, and off-putting. I’m not seeing that behavior on my iPhone 6 Plus. If you would prefer to have it fixed, change this line:background-attachment: scroll !important;
to
background-attachment: fixed !important;
Thanks Jesse, but interestingly the finnicky thing decided to go back to random over-zoomed static image backgrounds when I made that change.
I’m on iPhone 8
Hi Alex-
That’s really odd- I’m wondering if your caching plugin is preventing the changes from fully going into effect on your phone. Can you temporarily disable WP Super Cache and see if you’re still seeing that?The only change that I noticed when disabling that plugin is the changes I make are pushed to the phone much faster for the home page than they were before. Before, the changes were applied to the other pages faster than the home page.
The image is still scaling larger when I scroll on iphone. If i scroll very slowly it scales smoothly, but very choppy if I scroll normally.
It seems to work fine on Android (It’s static – so I lost the parallax effect there).
Hi Alex-
It looks like your site isn’t responding the same way as my testing site. Would you be able to submit a premium support ticket so we can take a closer look? Your DreamHost account includes premium support, just be sure to log into your dashboard with the same email you use for your DreamHost account.
- The topic ‘‘Resolve’ Theme Issue with Header Background Image’ is closed to new replies.
