Home App Docs Blog Github

How to create a parallax scrolling effect

In this example, we will create a parallax scrolling effect on a background image. To do so:

  1. Add a background image to your box or section in the background section in the styles tab
  2. While in the styles tab, scroll down to the custom CSS properties section and add:

background-attachment: fixed

  1. Scroll back up to the background section and make sure the image has these styles applied:
  • Image position: center

  • Background repeat: no repeat

  • Background size: cover

These styles will ensure that the image is centered and scaled properly. Now, scroll down your page to see the parallax effect in action!
Dec-11-2020 16-37-28

View an example of a parallax effect here.

2 Likes

@maddy Hi Maddy, do you know if there is a way to get this working on mobile? Thanks!

Hi @brfisher,

Fixed backgrounds are disabled for mobile devices (they decimate scrolling performance), which is why this isn’t working on mobile. We recommend that you don’t use parallax on mobile for this reason, but if you want to you can use this workaround:

  1. Create a new section for mobile where the box with the background image is wrapped in a section block.
  2. Give the box with the background image these styles in the styles tab:
  • position: fixed;
  • z-index: -1;
  • top: 0;
  • width: 100%;
  • height: 100%;

Giving the box with the background image position fixed will make it always stay in the same place, even if the page is scrolled. The negative z-index value will make the image sit behind the rest of your page content, so it appears to only scroll in its parent container. Here is a fiddle example.