Container Background Parallax Options

28/01/2020

Container Background Images can also have a parallax effect applied to them. There are a range of options with regard how the image should move. These options can be found in the BG tab of any container element, once a background image has been chosen.

Below is an example of a container with a background image that has a parallax effect applied to it. The direction chosen is left, and the speed is the default .3. As you can see as you scroll, the image moves to the left. On a mobile device the image will not move as Enable Parallax on Mobile has been set to No on this container.

Container Background Image Parallax Options

There are three parallax related options. The first is Background Parallax. There are six options here.

  • No Parallax – This is the default setting on Containers, with no parallax effects.

  • Fixed (fixed on desktop, non-fixed on mobile) – As the title makes clear, this makes the background image fixed when viewing on a desktop size screen, with the image not being fixed on mobile screens.

  • Up (moves up on desktop and mobile) – This option makes the image move in an upwards direction as you scroll down the page.

  • Down (moves down on desktop and mobile) – This option makes the image move in a downwards direction as you scroll down the page.

  • Left (moves left on desktop and mobile) – This option makes the image move to the left as you scroll down the page.

  • Right (moves righton desktop and mobile) – This option makes the image move to the right as you scroll down the page.

There is also an option that controls the speed of the image movement – The value should be between 0.1 and 1.0. A lower number means slower scrolling speed. Higher scrolling speeds will enlarge the image more.

Mobile Parallax Options

For parallax movement on mobiles, there is the Enable Parallax on Mobile option. This works only for the up/down/left and right options. To disable parallax effects on mobile when using one of these options, set this option to No. As the description explains, parallax effects can cause slowdowns when your site is viewed on mobile devices.