Dashboard background image

Configuration Frontend
1

Hi,

I am running HA on a Raspberry PI 4.
I would like to set a background image for one of the dashboards that I created.

I understand there are 2 steps:

  1. I’ll need to upload the image file onto the home assistant server. I know how to transfer files, but I don’t know where exactly to put the file. When I open a terminal session, I can see a ‘homeassistant’ folder, which contains a bunch of files include the configurations yaml files, and some folders (www, image, themes, etc).
    Where do I put the file?

  2. I’ll need to tell the dashboard to use the image file and set it as its background.

I found some posts that indicate to edit the dashboard (raw editor) and add a line

lovelace-background: center / cover no-repeat url("/path/to/image.jpg") fixed

Is that correct?

thanks!

2
  1. under www, either direct or create a folder
  2. /local/image.jpg OR /local/new-folder-name/image.jpg

PS: /www is referred to as /local

1 Like
3

thanks, file is there and I can access the image using the full URL.
How about the actual configuration in my dashboard? It’s not showing the background image.
Perhaps the theme fills the background with a color or something like that?
any ideas?

4

Go to devtools, services and call frontend.reload_themes. If it still doesn’t show ctrl f5 on the browser. For mobile you may need to call the service frontend.set_default.

Edit: you have to change the file path for background image in the themes yaml config first.

5

thanks! would you mind indicating what file exactly to edit?
Is it the dashboard itself?
Or do I need to edit the theme? (and what if the theme gets updated by the original author)?

6

First you need to see if your theme folder is setup. In the config folder, is there a folder called themes? If not use the file editor or vs code to create a new folder (green arrow) named themes.

Screenshot 2024-04-16 044656

Then create another folder my_themes and in there create a text file (blue arrow) named my_theme.yaml

Screenshot 2024-04-16 043210

In the yaml file you can define your theme/s. The name that you give the theme here will show up in the drop down menu.

My theme: ## name in drop down
  lovelace-background: 'center / cover no-repeat url("/local/new-folder-name/image.jpg") fixed'

My other theme: ## name in drop down
  lovelace-background: 'center / cover no-repeat url("/local/new-folder-name/image.jpg") fixed'

Finally you need to tell HA to look in there for themes, in config.yaml add:

frontend:
  themes: !include_dir_merge_named themes

From devtools, restart HA. Now in your profile (picture icon bottom of the side bar) under themes you can select your theme. For more dashboard options see:

I also suggest installing HACS if you haven’t already and download a few themes. You can then modify them, copy it to your theme yaml with a unique name and save it there.