Parallax background on mobile zooms in.

[abbinho]

I have a page on my website for “Our Story”. On the desktop version it looks good. But on the mobile version I can’t get it to look good. I have created a fallback image that looks somewhat decent but I don’t want a a long long picture because then there will be a lot of dead space. I want the background picture to just be a fixed/parallax type of background, where the text moves but not the picture (or it can move a bit but not a lot). But when I choose the parallax setting it zoooms in a LOT on a part of the picture. It works but it zooms in a LOT. The problem might just be that I need the right dimensions for the picture but I have no idea what those dimensions would be then.

[David Martin – Support]

Please add this to Theme Options => Custom CSS:

@media only screen and (max-width: 767px) {
.fw-row>.spb-row {
    background-attachment: local!important;
}
}

[abbinho]

Thank you for the help but it did not work, it still isn’t parallax or scroll or whatever it is called. Still looks bad. Should I change some settings as well or should just this CSS make it work? Feel free to try yourself if you wish (you can use any picture as a placeholder if you want to use different dimensions).

[David Martin – Support]

The Parallax scroll is disabled on mobile for performance.

Can you screenshot what you see, what device are you using?

[kblochowski]

I am having the same issue when viewing my site on my tablet. I tried implementing the CSS you provided and it makes the background image on the phone look great. How might I fix it for an iPad?

[David Martin – Support]

@kblochowski – what is your link? Please also provide a screenshot for this.

Do you mean iPad landscape only?

[kblochowski]

This reply has been marked as private.

[David Martin – Support]

Hi Ken,

Thanks for the warning!

If you can test adding this and then clear your iPad cache:

@media only screen and (max-width: 767px) {
.fw-row>.spb-row,
.spb-row[data-image-movement="fixed"] {
    background-attachment: local!important;
}
}

If that does not work, please leave the CSS there so I can see what is overriding it.

[kblochowski]

This reply has been marked as private.

[kblochowski]

Hi David,

I was able to get this to finally work by setting the background image to “Scroll” instead of fixed. Looks like I’m set now. Thank you!

Ken

[David Martin – Support]

Hi Ken,

Glad you got this working.

Thanks.