Background image change day/night

Share your Projects! Dashboards & Frontend
1

I have tried in themes but seems there is nothing there for background image just color. What I am trying to achieve is I have themes that change with an automation light/day, dark/night. I have 2 backgrounds I would like to use one for day one for night. at this time I am only able to use one and I have it right under the title in the lovelace.yaml file. I saw in a custom weather card the ability for the background image to change using sun.sun.state ex: background-image: url("/local/weather/[[sun.sun.state]].png")

I am wondering if it is possible for the background on the entire screen not just the card.
something like this ex: background: url("/local/background/[[sun.sun.state]].jpg") fixed

I have 2 images in www/background
above_horizon.jpg and below_horizon.jpg

I have tried this and a few other changes and nothing seems to work.
Wondering if anyone has any ideas

2

hi @typhoonss9229 did you manage to change the background image according to the day/night?

3

Use a shell command

In my shell.yaml file:

bg_day: 'cp /config/www/clear-day.jpeg /config/www/background-actual.jpeg'
bg_night: 'cp /config/www/clear-night.jpeg /config/www/background-actual.jpeg'

I do the automation in Node-Red but I call the service for those shell commands at sunrise/sunset.

1 Like
4

is there no problem with the browser cache?

5

Depends on your browser settings. A refresh usually does it.