- This topic has 4 replies, 2 voices, and was last updated 4 years ago by
.
-
Posts
-
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;
}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.
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'); } }
- The topic ‘Fixed background image scrolls on phone’ is closed to new replies.