Parallax Basic Setup

1. When you drag your Parallax Stack out, you will see the above stack appear on your page.
2. You do not need to edit anything with the stack, all work is done in the stack settings.
3. First you will want to determine what type of Parallax Type you want. You have three choices, Cover Body, Image Only & Image + Content.

The Cover Body type is an image that is applied to the page background full height. You can have more than one and layer them with semi transparent ones in front. The order is in how you drop them on the page, so stacks further down in edit mode are the stacks behind, ones in front are on top. You can get further control of ordering by using the z-index seting, but we suggest you do not mess with this unless necessary. A z-index of 0 work fine.

The Image Only and Image + Content are the same type, except the later has an option of foreground content stacks over the parallax. Think of these settings as normal fixed background image stacks with a moving background rather than a fixed background.

4. Next, look at the Bleed setting. This should be always used to smooth the top and bottom edges UNLESS the picture is adjacent to a stack with Transparent content, in which case you will see the bleed and it make the setting useless. The Bleed setting expands the image both up and down by the number of bleed pixels, so when the stack is next to a solid background stack, the top and bottom edges of the picture are behind and not seen. It is these edges that can show a little re-draw on fast scroll

5. The Speed setting is next on the list. We recommend to keep the setting below 50% of page speed for a smoother effect.

6. Next you can add the image. You can either drag and drop the image into the image well in the stack settings, or you can check the box marked Warehouse Images? and use images that are warehoused on your server.

7. There are also some very important Alignment settings. You can adjust the Horizontal and Vertical alignment. Parallax smart scales the content according to the alignment options to preserve the important content and also best fill the area.

8. For performance issues, on mobile screens and touch devices, the parallax effect is disabled and becomes a static image. You can also set your own mobile image if you want it to be something different.

9. Now preview and enjoy! For an summary of the remaining settings please refer to the Parallax Settings section.

Now go forth and make your websites great!