Virginia Tech® home

Parallax Image Stripe

This page demos the parallax image stripe widget in two sizes: 16x9 and full-screen. Please note that the parallax image stripe is not fully accessible. Using images with information in them as backgrounds is an accessibility violation. Use only decorative images. You can build the widget yourself or copy/paste from an example page and edit them to your needs. You can also copy the demos.

Examples: Full-screen | 16x9 | Callout | Large Heading

How to create the parallax image stripe

This will create a standard 16x9 full-width parallax image stripe. These instructions require the use of container components, text components, image components, and custom utility classes.

STEP 1.

Add a container component. Give the container the CSS class vt-parallax-stripe and select Full Browser Width.

parallax image 1
The 'vt-parallax-stripe' class is placed on the main full-width container

STEP 2.

Add a text component to the full-width container and add content.

STEP 3.

Add an image component below the text component and give it the CSS class vt-parallax-img and then add an image. The widget will not work if you do not provide an image.

parallax image 2
The 'vt-parallax-img' class is placed on the image component.

Additional Utility Classes (optional)

Optionally, additional custom utility classes can be placed in the CSS Class field in the component properties. Visit this documentation page on custom utility classes.

  • vt-parallax-fullscreen - Full-width container component custom class. Stretches the parallax stripe to full-screen when scrolling. Defaults to 16x9.
parallax image 3
By default, the parallax image stripe is 16x9.
  • vt-parallax-callout - Container component custom class. Adds a backdrop to content within the stripe.
  • vt-parallax-align-left - Text or container component custom class. Aligns content to the left with a fixed width.
  • vt-parallax-align-right - Text or container component custom class. Aligns content to the right with a fixed width.
  • vt-parallax-align-center - Text or container component custom class. Aligns content in the center with a fixed width.
  • vt-parallax-large - Text component custom class. Large text in Rubik font.
parallax image 4
When creating a callout, the text component must go inside of a container with the 'vt-parallax-callout' class on it.

Further customizations can be set on the container component itself for your needs.

Additional Custom CSS Properties

Custom CSS properties are placed in the CSS Styles field in the full-width container component properties.  Visit this documentation page on container components.

  • --vt-parallax-backdrop: transparent - Removes the gradient effect from the parallax stripe. Custom property for container components.
  • --vt-focus-outline: white - Changes the link focus-state outline color. For use with dark parallax backgrounds (e.g. --vt-focus-outline: white). Custom property for container components.
parallax image 5
Custom css properties should be placed on the main full-width container component.