iPhone Fixed Background Workaround

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:


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


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

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



Leave a Reply

Posted in CSS
katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.