The Full‑Width Media Component lets you add large, edge‑to‑edge visuals to your brand guide pages. It’s perfect for hero sections, mood imagery, product showcases, video banners, or any moment where you want to make a strong visual impact.

You can choose between image or video, customize height, enable parallax, and apply brand‑consistent colors — all from a simple, intuitive editor.

🌟 What You Can Do with the Full‑Width Media Component

Inside this component, you can:

• Choose between image or video backgrounds
• Select files from your brand’s uploaded media
• Set a custom height (e.g., 60vh, 500px)
• Enable parallax scrolling (image only)
• Control background color
• Configure video playback options (loop, mute, autoplay)
• Maintain brand consistency with theme‑aware color options

It’s one of the most visually powerful components in MyStyleGuide.io.

🧭 Component Overview

When you open the Full‑Width Media Component in the Component Editor, you’ll see several sections:

1. Background Type: Image or Video

Choose the type of media you want to display:

Image

• Ideal for photography, illustrations, or static visuals
• Supports parallax scrolling
• Uses your uploaded image files

Video

• Great for motion branding, product reels, or ambient loops
• Uses your uploaded video files
• Includes playback controls

Switching between the two updates the available settings instantly.

2. Background Color

You can set an optional background color behind the media.

This is useful for:

• Creating contrast
• Matching brand colors
• Adding a fallback color behind transparent images or videos

You can choose:

• A HEX value
• A theme color from your brand’s palette
• Or leave it blank for default styling

3. Height

Set the height of the full‑width section.

Examples:

• 60vh (60% of the viewport height)
• 100vh (full screen)
• 500px (fixed height)

This gives you full control over how dramatic or subtle the section feels.

4. Parallax (Image Only)

Enable parallax to create a subtle scrolling effect where the background image moves slower than the foreground content.

This adds depth and visual interest.

Parallax is only available when Background Type = Image.

🎬 Video Settings

If you choose Video, you’ll see additional options:

Video File

Select from your uploaded video files (mp4, webm, mov, m4v).

Loop

Automatically restarts the video when it ends.

Mute

Silences the video — recommended for autoplaying videos.

Autoplay

Starts the video automatically when the page loads.

Most browsers require autoplaying videos to be muted, so these settings work together.

🖼 Image Settings

If you choose Image, you’ll see:

Image File

Select from your uploaded images (jpg, png, gif, webp, svg).

This image will stretch full‑width across the page.

🎨 Theme‑Aware Color Options

All color fields use the same system as the rest of MyStyleGuide.io:

• Enter a HEX value
• Or choose from your theme’s predefined colors
• Or leave blank to use defaults

This ensures your full‑width sections stay visually consistent with your brand.

💾 Saving Your Changes

When you’re done editing:

1. The component updates its internal JSON automatically
2. The preview refreshes in real time
3. Click Save Component to finalize your changes

Your full‑width media section will now appear on the page exactly as configured.

🎯 Summary

The Full‑Width Media Component helps you:

• Create immersive, edge‑to‑edge visual sections
• Use images or videos with flexible settings
• Add parallax effects
• Control height and background color
• Maintain brand consistency
• Build dramatic, modern layouts

It’s one of the most dynamic components in your toolkit — perfect for making a strong visual statement.