iPhone Fixed Background Workaround

November 21, 2018

Using fixed backgrounds on mobile devices can be tricky, as not all mobile devices support background-attached: fixed.Desktop browsers widely accept background-attachment: fixed, but iPhones require the below workaround to show the scrolling image:

Desktop

.background-image {
    background-size: cover;
    background-attachment: fixed;
}

Mobile

@media (max-width: 600px) {
    .background-image {

        background-size: auto;
        background-attachment: initial;

    }
}

Source.