Time Based Background is a smart component that dynamically changes your website’s background throughout the day using the visitor’s local time.
Simply upload images for different times of the day, morning, day, evening, and night and the component automatically switches between them as time passes. This creates a living, contextual experience that makes your website feel more immersive and responsive.
The component also includes intelligent fallback logic. If certain time slots don’t have images, it smoothly continues using the previous available image instead of leaving blank spaces. For example, if only morning and night images are uploaded, the morning image will remain active until the night time begins.
You can also customize the start time for each period, giving you full control over when backgrounds change.
Perfect for portfolio hero sections, landing pages, and storytelling websites that want to visually reflect the time of day.
Features
Automatically detects visitor’s local time
Supports morning, day, evening, and night backgrounds
Customizable time ranges for each period
Smart fallback logic when images are missing
Full-width responsive background support
Simple drag-and-drop setup inside Framer