# How to create a parallax scrolling effect **URL:** \ **Category:** Visual Editor Help\ **Created:** [December 11, 2020, 9:40pm UTC](https://forum.builder.io/t/how-to-create-a-parallax-scrolling-effect/335 "2020-12-11T21:40:49Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\ **Post date:** [December 11, 2020, 9:40pm UTC](https://forum.builder.io/t/how-to-create-a-parallax-scrolling-effect/335/1 "2020-12-11T21:40:49Z")
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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/7028482666cb1b42daebf3048430e80bd0f34a9c.gif) View an example of a parallax effect [here](https://builder.io/fiddle/5cc86560b73048bba78ef6536c234a82). ---
**Author:** ![brfisher](https://avatars.discourse-cdn.com/v4/letter/b/47e85d/32.png) [@brfisher](https://forum.builder.io/u/brfisher)\ **Post date:** [November 23, 2021, 8:14pm UTC](https://forum.builder.io/t/how-to-create-a-parallax-scrolling-effect/335/2 "2021-11-23T20:14:59Z")
@maddy Hi Maddy, do you know if there is a way to get this working on mobile? Thanks! ---
**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\ **Post date:** [November 24, 2021, 8:04pm UTC](https://forum.builder.io/t/how-to-create-a-parallax-scrolling-effect/335/3 "2021-11-24T20:04:20Z")
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](https://builder.io/fiddle/6663865320e5405ea0c2f323dadab376) is a fiddle example. ---
**Author:** ![Harrison](https://avatars.discourse-cdn.com/v4/letter/h/3e96dc/32.png) [@Harrison](https://forum.builder.io/u/Harrison)\ **Post date:** [May 19, 2022, 6:02pm UTC](https://forum.builder.io/t/how-to-create-a-parallax-scrolling-effect/335/4 "2022-05-19T18:02:32Z")
Hello @maddy, How would I create a section that has nested scrolling within that section. Similar to [Our Company - Rivian](https://rivian.com/our-company) ---
**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\ **Post date:** [May 23, 2022, 3:15pm UTC](https://forum.builder.io/t/how-to-create-a-parallax-scrolling-effect/335/5 "2022-05-23T15:15:53Z")
Hi @Harrison! The example you shared has a div with `height: 100vh` and `position: sticky` that wraps the video, which is wrapped in a section that has `position: absolute`. I created an example of this in Builder [here](https://builder.io/fiddle/ea94e4ee61d54c3dab3a9ca1ec6d65e8). Let me know if you have any additional questions! ---
**Author:** ![racheldbailey](https://avatars.discourse-cdn.com/v4/letter/r/4bbf92/32.png) [@racheldbailey](https://forum.builder.io/u/racheldbailey)\ **Post date:** [July 6, 2022, 2:59pm UTC](https://forum.builder.io/t/how-to-create-a-parallax-scrolling-effect/335/6 "2022-07-06T14:59:50Z")
Hello! I had the same question as the poster about creating a parallax section. When I tried your steps, I noticed I can’t seem to find the “z-index” option in my styles tab. This is my builder link: [Builder.io: Drag and drop page builder and CMS](https://builder.io/content/c5d45a89b6414bf982af6ab1fb04935f) ---
**Author:** ![Harrison](https://avatars.discourse-cdn.com/v4/letter/h/3e96dc/32.png) [@Harrison](https://forum.builder.io/u/Harrison)\ **Post date:** [July 6, 2022, 4:03pm UTC](https://forum.builder.io/t/how-to-create-a-parallax-scrolling-effect/335/7 "2022-07-06T16:03:20Z")
hey @racheldbailey z-index needs to be manually created in the Style - CSS properties tab ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d7809e1b3f99e5ffb0f5e245334d2d08c8d659e8.png)