Dashboard background image


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?


  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

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?

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.

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)?

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:

  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.

1 Like