Why Doesn’t Parallax Scrolling Work on Mobile?

No results found. Try again with different words?

Search must be at least 3 characters.

    Why Doesn’t Parallax Scrolling Work on Mobile?

    Parallax scrolling is a great effect that can give your website a unique look and feel. Parallax scrolling allows your background to move slower than the foreground. This creates the illusion of depth and movement on the website for the visitors. 

    If you check it on mobile devices, you’ll notice that your parallax sections don’t work but show static images instead. This document will help you understand why this is happening and how you can work around it.

    Parallax Scrolling Doesn’t Work on Mobile

    Why Is This Happening?

    The parallax scrolling effect is created by setting your background image position as “fixed” (background-attachment: fixed). This fixed image effect (parallax) is currently properly supported only by the Mozilla Firefox browser. 

    When you use other browsers on any touch device, parallax scrolling will be overwritten for compatibility reasons. As a result, you will only see a static image instead of your parallax.

    Due to responsiveness issues with parallax scrolling on mobile browsers and performance concerns, most mobile browsers still don’t support it. 

    What Can Be Done?

    Since version 3.0.0 Astra Theme comes with the Header Footer Builder. Thus, you can add a parallax scrolling effect for both the header and footer as Header Footer Builder supports it. 

    Let’s show you how to activate this option, for example, for your Primary Footer:

    Step 1 – Log in to your website and navigate to Dashboard > Header Builder > Primary Footer> Design > Background

    Step 2 – Here, set your background image, and click on “More Settings”

    Step 3 – Under the “Attachment” dropdown, select the “Fixed” option. “Publish” to save changes.

    Set Background Attachment to "Fixed" to Activate Parallax Scrolling

    Now that you have your parallax effect set on your desktop, you can add separate settings for different screen sizes since parallax scrolling doesn’t work on mobile. You can use Astra’s responsive editing options to remove parallax and design your footer (or header) for Tablet and Mobile. For this, continue with the following steps:

    Step 4 – Switch to Tablet/Mobile editing by clicking on the responsive editing icon on the “Background” option.

    Responsive Editing - Add Different Settings for Mobile Devices

    Step 5 – Edit your Background settings for tablet/mobile and “Publish”

    This way, you will be able to have parallax scrolling on desktop screens while having well-designed header and footer sections on tablet and mobile devices at the same time.

    What About The Content?

    Most often you will add content to your pages and posts by using page builders. Thus, the Astra theme parallax settings will not be applied here.

    Therefore, you can use the Page builder responsive editing options in a similar way to Astra’s Header Footer Builder.

    Still, in some page builders (Elementor), you will not be able to separately adjust these settings for different viewports. Here, your parallax scrolling will automatically be replaced by a static image.

    Was this article helpful?
    Did not find a solution? We are here to help you succeed.

    Related Docs

    Scroll to Top

    Download is Just A Click Away!

    Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

    Download is Just A Click Away!

    Enter your email address and be the first to learn about updates and new features.