Parallax Image

Basic Content - Parallax Image

The Parallax Image element will insert an image at its "full size" and pin it into the site.

Drag and drop the More Column Content element from the Website Editor Sidebar into the column space where you want to add the Parallax Image element.

img

This will open the Choose Content window.

img

Clicking the Parallax Image element will now drop it into the column space you selected.

There is no default image selected when inserting the element. An image should be added to make use of this element. Below is an example image:

img

This provides the effect when scrolling of the image maintaining its position while scrolling displays more of the image in the vertical direction.

img

Parallax images are not supported by iOS.

Edit Parallax Image

Add Image

To add an image to the Parallax Image element, click the "cog" icon and then click the "pencil" (edit) action icon. This will display the Choose Image window to be used with this specific element.

img

Clicking the Edit Element button in the Website Editor Sidebar will also open the Choose Image window to be used with this specific element.

Image Sizes

The precise dimension is not critical (since screen sizes will vary) although a width roughly in the following ranges will work well in most cases:

  • for "full-width" photos or images, a width of around 1200px is best;
  • for "half-width" photos or images, a width around 600px should be used; and,
  • page background images work well up to 1600px wide.

Height

The main property of the Parallax Image element to be edited is the Height which is measured (by default) as a percentage of the browser's viewport size (see w3Schools' Responsive Web Design - The Viewportopen in new window for a definition of this property). Using this value as a percentage helps maintain an appropriate size for both desktop and mobile devices.

INFORMATION

The Parallax Image element will only display the vertical scrolling direction for its image.

Recommended Reading

See Common Element Actions for more details on managing the Parallax Image element.


Last reviewed: February 2023
BasicContent_ParallaxImage
/website/reference_websites/column_content/parallax_image/
website
reference_websites
column_content
parallax_image
Parallax Image