Parallax Scrolling Acting Differently on Mobile

HTML & CSS
1

Hey everyone!

I’m having an issue with my parallax scrolling backgrounds on my site.
It’s a custom built Wordpress theme using Underscores and built with Bootstrap.

It’s located here:

You’ll see I have a parallax scroll on all my pages, except the portfolio page, which I haven’t done yet, and the Resources page.

The weird thing is that I can’t replicate this problem on the desktop, no matter what size my browser is. It continues to work correctly. When I view on mobile (both my tablet and phone), it shows a white background under the photo but before the next section. On desktop it looks as if the header and content are “on top” of the photo, scrolling at different speeds, which is how I want it to look. On mobile it looks like the content is following the white background that is there.

I understand that when using background:cover, some things you just have to deal with, but I can’t understand why it doesn’t do this on desktop and only on mobile.

Bonus issue: once I get this figured out, I want to change the home page featured image to a rotating one, possibly a Bootstrap Carousel or a JQuery plugin. Any advice for that is also appreciated!

Thanks!!

2

I believe the issue is that you are using background attachment:fixed which is not supported on mobile and so you won’t get a parallax scroll.

You would be better of just removing that image for mobile as it fills the whole viewport with a picture of a laptop and you have to scroll down to find anything useful. Or at least make the image substantially smaller for mobile.

3

You’re exactly right! I feel like a dummy. :smile:

Thanks for your help!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.