Background Demo
Background Image
This page demonstrates the background image feature with theme-aware support. Toggle between light and dark themes to see different background images.
Theme-Aware
Different images can be set for light and dark themes. The background automatically switches when you change the theme.
Fixed Position
The background stays fixed while you scroll, creating a subtle parallax effect that adds depth to the page.
Overlay Support
Add a semi-transparent overlay to ensure text readability while keeping the visual appeal of your background.
Configuration
Configure per-page background images in config/params/canvasAnimations.php:
'site/bg-image' => [ 'enabled' => true, 'type' => 'image', 'image' => [ 'src' => [ 'light' => '@web/images/backgrounds/background-1.jpg', 'dark' => '@web/images/backgrounds/background-2.jpg', ], 'position' => 'center center', 'size' => 'cover', 'fixed' => true, 'overlay' => 'rgba(0,0,0,0.3)', ],],Available Options
| Option | Type | Description |
|---|---|---|
src | string|array | Image path. Use array with light/dark keys for theme-aware images. |
position | string | CSS background-position (e.g., "center center", "top left") |
size | string | CSS background-size: "cover", "contain", or "auto" |
repeat | string | CSS background-repeat: "no-repeat", "repeat", "repeat-x", "repeat-y" |
fixed | boolean | If true, background stays fixed on scroll (parallax effect) |
overlay | string | Optional overlay color (e.g., "rgba(0,0,0,0.3)") |