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.
Content Options
Layout and Styling Options
Minimum Height
Overlay
Text Color
Content Width
Content Position
Margin bottom
the end
Margin top
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.