Fixed Backgrounds & Videos

This guide explains how to use fixed backgrounds and videos to enhance your website's pages and create immersive experiences. Fixed backgrounds can apply site-wide or to specific pages and add a touch of vibrancy and customisation to your site.

(note this is sped up 30% but if you'd like the original that's here on Loom)

What Are Fixed Backgrounds?

A fixed background is a static image or video that stays in place while the user scrolls, creating a layered and dynamic effect. This can be applied:

• Across the entire site for consistent branding.
• To individual pages for customised theming (e.g., a Christmas event page).
  ‍

Setting Up Fixed Backgrounds

Site-Wide Fixed Backgrounds

1. Navigate to the Site Settings in your LOOP admin panel.
2. Select the Fixed Background option.
3. Upload an image or link a video from YouTube/Vimeo:
   • Images: Choose non-cluttered visuals to maintain readability.
   • Videos: Use subtle tints to avoid overpowering text and content.
4. Publish your changes.
   • This will apply the background to all pages unless overridden at the page level.

Page-Specific Fixed Backgrounds

1. Open the page in the admin editor.
2. Set a Fixed Background for that specific page:
   • This overrides any site-wide settings.
3. Use unique backgrounds to theme individual pages without affecting others.
   ‍

Types of Fixed Backgrounds

Images

• Fixed background images stay static as content scrolls over them.
• Use high-quality, simple visuals to ensure readability.
• Example: A snowy background for a winter campaign.

Videos

• Videos can add dynamic movement to your pages.
• Tints are essential for balancing content visibility:
  • Higher Tint Values: More overlay, less visible video.
  • Lower Tint Values: Less overlay, more prominent video.
• Always test video backgrounds for legibility on text-heavy sections.
  ‍

Tips for Effective Use

• Readability: Ensure text stands out against the background by using contrasting themes (light vs dark).
• Customisation: Use different backgrounds for homepage features and subpages to enhance focus.
• Immersion: Combine fixed backgrounds with transparent headers or hero images for seamless visuals.
• Experimentation: Test changes on a hidden page or staging site to avoid disrupting live content.
  ‍

Enhancing Fixed Backgrounds

Feature Panels

• Combine fixed backgrounds with hero content (e.g., logos, titles, call-to-action buttons).
• Add a transparent hero image to highlight the background.
• Example: Use a fixed snowy background with a “Explore Our Christmas Event” call-to-action.

Theming Per Page

• Apply unique themes to create a tailored experience.
• Example: A fixed rollercoaster image for an amusement park page or falling snow video for a festive theme.
  ‍

Practical Examples

• Homepage: Use a fixed background as a hero section with a prominent call-to-action.
• Event Pages: Add immersive visuals like subtle videos or themed images to lift the design.
• Site-Wide Branding: Implement a consistent background image for a cohesive look.
  ‍

Final Recommendations

1. Test Before Publishing: Experiment on a hidden page to ensure content remains legible and visually appealing.
2. Use Sparingly: Overuse of fixed backgrounds, especially videos, can overwhelm users.
3. Focus on Readability: Prioritise clear text visibility by choosing appropriate images, videos, and tints.
   ‍

By leveraging fixed backgrounds and videos effectively, you can create dynamic, engaging pages that bring your website to life. Experiment with these tools to design an immersive and memorable user experience.