Home Forums Azuma Pro Fixed background image scrolls on phone

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #12937
    David Burns
    Participant

    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;
    }

    #12940
    Andy
    Keymaster

    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.

    #12946
    David Burns
    Participant

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

    #12963
    Andy
    Keymaster

    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');
        }
    }
    #12973
    David Burns
    Participant

    That works well. Thank you Andy!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.