Overlay Image Fixed does not work on iPhone

jelita

Hi,
when I create a fixed overlay background it doesnt work on my phone. In the template preview it looks perfect, on my phone it doesnt. I tried to chang the Image resolution to my phone's native resolution, but it doesnt change the behaviour.

dominic

Hi jelita,
You can add the following CSS code to the Backend > Site template styles > your template > Tools > Custom CSS:

@media (max-width: 767px) {
    #t4-section-1 .bg-overlay-image {
    background-attachment: initial;
    }
}

jelita

Hi dominic,

thanks for you reply.
looks better, but it is still scroll and not fixed on the phone. On PC it's perfect.

Any other suggestions?

jelita

btw, when I type it is the same behaviour as before:
@media (max-width: 767px) {
#t4-section-10 .bg-overlay-image {
background-attachment: fixed;
}
}

To mention, I use the same overlay-bg 3 times on the same main page.

dominic

Hi jelita,
At the moment, Using background-attachment: fixed with background-size: cover causes issues on most mobile browsers (as you've seen). You can try using background-attachment: scroll. This won't give your desired effect, but you'll see the images at least.
In this case, you should use the: background-attachment: initial;