Parallax backgrounds are a good way to create an engaging website, this allows the page to have a scrolling/floating effect, this help guide will show you how you can add in a parallax background along with a few tips and tricks.
Please note the Parallax feature is added to Desktop only.
Add interest and depth to your website with Stack background parallax
A Parallax (scrolling background) is a vertical positioning option that allows your stack background images to stay stationary as the page scrolls, so more of the image will be revealed as the website viewer scrolls up or down. As a viewer scrolls through a web page, objects in the foreground and background are perceived to move at different paces.
(To make this tour bigger, click the arrows on the right or zoom in)
How to achieve this effect.
First you'll need to either add a Stack or select an existing Stack to edit.
1. Edit your stack by clicking Edit Design on the Stack Design Controls hit the pencil icon the top left-hand corner. Learn about getting started with Stacks/Stack Specific Design options here.
OR There is a pencil icon when you hover over the stack in the top left-hand corner, you can click this and it will take you straight to the Stack Background settings.
2. Open the Stack Background tab and upload an image. Only once you've added an image (or already have an image in place) will the Vertical Position alignment control tab be visible.
3. Select Parallax (scrolling background) from the Vertical Position drop-down menu. Reduce the Picture Opacity if required, for a more subtle effect.
Try this.
1. For a parallax effect that spans two or more adjacent stacks with a single image.
Copy your stack OR alternatively add the same background photo to your adjacent stacks on the same page. Make sure that your consecutive stacks backgrounds Vertical Position is set as Parallax (scrolling background). If two or more stacks are adjacent, no visual separation will be apparent.
2. For a fixed stack background image that's separated by a colour block or a different image.
In your Dashboard Editor, click Copy Stack on the stack you've applied Parallax (scrolling background) to.
Then click Add Stack between the two stacks and add your content (we suggest using a colour background here, or a different image without a parallax effect to contrast your Parallax (scrolling background) stacks.
Designer's tip:
Try using background images that contrast in colour or texture to make the transition between stacks clearer.
Use the Stack Background Colour and Picture Opacity design controls to make your headings more legible/visible.
See more Stack Specific Design controls here.