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.

1 Like