Fixed background image scrolls on phone

[David Burns]

I have set a background image (2000 x 1500px, fixed center center no-repeat) which works correctly on computer, iPad Pro and iPad, but on phones in vertical orientation the image initially scrolls some with the page content.

How can I have it remain fixed like the initial view before scrolling down?

Generated CSS…

body.custom-background {
background-color: #2b2b2b;
background-image: url(“MyImageURL”);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

[Andy]

On an iPhone in portrait orientation, iOS overrides the styling to position the background image how it thinks it will look best.

So, there are no changes to the CSS that can be done to prevent this, as iOS will always override it.

[David Burns]

Thanks Andy. Do you know of an image size/aspect ratio that works best?

[Andy]

For the best image size, I would say it is a matter of personal preference, but I would say you could look at using an image with a narrower width in relation to the height for smaller devices such as phones.

Then use a media query in custom CSS to use the alternative image on mobile only, like so:

@media (max-width: 768px) {
    body.custom-background {
        background-image: url('my-image-url-alt-phone');
    }
}

[David Burns]

That works well. Thank you Andy!

[Author]

Posts