The Text Over Parallax Background Image component is designed to create a captivating visual experience on your website. This component features text overlaying a background image that remains fixed as the user scrolls, adding a parallax effect. It allows for a customizable heading, body text, and a call-to-action button. Authors can adjust several settings such as height, image overlays, text color, and content width to best fit their needs.

This is an example with default settings

This is some body text

This is a CTA

Content Options

This component has only a heading

This component has only body text

This component has only a CTA

Layout and Styling Options

Minimum Height

Minimum height: 10vh

Minimum height: 20vh

Minimum height: 30vh

Minimum height: 40vh

Minimum height: 50vh

Minimum height: 60vh

Minimum height: 70vh

Minimum height: 80vh

Minimum height: 90vh

Minimum height: 100vh

Overlay

Overlay: None

Overlay: Light

Overlay: Dark

Text Color

Invert Text Color: On (default)

Invert Text Color: Off

Content Width

Content Width: 2

Lorem ipsum dolor sit amet.

Content Width: 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Content Width: 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Content Width: 8 (default)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam vulputate ut pharetra sit. Nam at lectus urna duis. Ut sem viverra aliquet eget sit amet tellus cras adipiscing.

Content Width: 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam vulputate ut pharetra sit. Nam at lectus urna duis. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.

Content Width: 12

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam vulputate ut pharetra sit. Nam at lectus urna duis. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.

Content Position

Content Position: Top left

Content Position: Top center

Content Position: Top right

Content Position: Center left

Content Position: Center (default)

Content Position: Center right

Content Position: Bottom left

Content Position: Bottom center

Content Position: Bottom right

Margin bottom

Bottom Margin: None

Bottom Margin: X-Small

Bottom Margin: Small

Bottom Margin: Medium

Bottom Margin: Large

Bottom Margin: X-Large

the end

Margin top

Top Margin: None

Top Margin: X-Small

Top Margin: Small

Top Margin: Medium

Top Margin: Large

Top Margin: X-Large

the end

Usage

Do

  • Ensure your background image is high quality and complements your content.
  • Use clear and concise headings to convey the main message effectively.
  • Choose text colors that stand out against the background image for readability.
  • Adjust the height of the component to suit the layout of your page.
  • Utilize image overlays to enhance text visibility.
  • Keep the body text short and to the point for better impact.
  • Test the component on various devices to ensure it looks good on all screen sizes.
  • Consider the overall design aesthetic of your website when customizing the component.

Don't

  • Avoid cluttering the component with too much text or too many elements.
  • Do not use images with busy patterns that distract from the message.
  • Avoid placing important text elements in areas that might be cropped on different screen sizes.
  • Resist the temptation to overuse this component on the same page.

Accessibility

  • Alt text is not required as the images are used as background images.
  • Use your best judgment when choosing styling options to ensure the text is clear and readable for visually impaired users.