---
title: "TimeBased Background — Free Framer component · Best of Framer"
description: "Free Framer component · by SanndyCreationz · Backgrounds. Automatically change BG based on time."
canonical: "https://framer.elliotli.dev/component/timebasedbg"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/TimeBased Background

# TimeBased Background

Automatically change BG based on time.

[View on Framer](https://framer.com/marketplace/components/timebasedbg/?via=elliot-li)

![TimeBased Background preview image 1](https://framer.elliotli.dev/og/component/timebasedbg/09887802c1d0434a/1600x1200.jpg)

## Summary

Automatically change BG based on time.

## Description

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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-g6u8ak7h-kQZI1PVXsXp8UJlZkttRNgSBcXT0ly)

## Rank history [How rankings work →](/terms#rankings)

-   All · #2768

## Details

- **Author**: SanndyCreationz
- **Published**: 2026-03-25
- **Updated**: 2026-04-03
- **Added**: 2026-03-12
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background