Hero Background Image

Add a cinematic background image to your hero section.

○How It Works

The hero image appears only in the header area and smoothly fades out as users scroll down. This creates a stunning first impression without overwhelming the rest of your content.

Configuration

Enable the hero background in your site config. Place your image in the /public folder.

src/config/site.config.ts

background: {
  heroImage: {
    enabled: true,              // Turn on hero image
    image: '/background.jpg',   // Your image in /public folder
    overlay: 0.6,               // Darkness (0-1)
    blur: 0,                    // Optional blur in pixels
  },
}

Options

Option	Type	Default	Description
enabled	boolean	false	Show hero background image
image	string	/background.jpg	Path to image in /public folder
overlay	number	0.6	Darkness level (0-1). Recommended: 0.5-0.7
blur	number	0	Blur amount in pixels

Image Requirements

Recommended size: 1920x1080 or larger
Use dark images that blend well with the overlay
Optimize images to under 500KB for fast loading
Place image file in the /public folder
Supported formats: JPG, PNG, WebP

Examples

Subtle Background

background: {
  heroImage: {
    enabled: true,
    image: '/spawn.jpg',
    overlay: 0.7,    // Darker overlay
    blur: 0,
  },
}

Soft Focus Effect

background: {
  heroImage: {
    enabled: true,
    image: '/landscape.jpg',
    overlay: 0.5,
    blur: 3,         // Slight blur
  },
}

○Tip

Test your hero image on mobile devices. The image may crop differently on smaller screens.