Change dashboard background image

Configuration Frontend
1

I am trying to change the background of my dashboard. Not sure why such a simple task is so difficult. I read all threads but nothing seems to be working.

  1. I don’t have any themes. This is the default home assistant theme
  2. I uploaded the image to the correct path (www/pictures/bc.jpg)
  3. I clicked edit on my dashboard and just added:
views:
  - title: Home
    background-image: center / cover no-repeat fixed url("/local/pictures/bc.jpg")
  1. I tried to clear browser cache, restart HA… it completely ignores it. No errors in the console, no errors in the logs…
2

It’s just background: not background-image:

views:
  - title: Home
    background: center / cover no-repeat fixed url("/local/pictures/bc.jpg")
3

Didn’t work for me. At the end I ended up creating my own theme and then it worked. I didn’t find a way to set a default background image without creating a new theme.

4

So still no answer? I tried so much, even editing themes, nothing works…

This is indeed strange, such a simple task and truly impossible to find one straight answer or even doing it in the UI!

This should be top in the WTH-list!

5

Themes works.

Please provide what you have tried…

An old but basic theme example

Example:
  modes:
    dark:
      lovelace-background: "center / cover no-repeat fixed url('/local/pics/bluespace.jpg')"
      app-header-background-color: none
      ha-view-sections-column-gap: 0px
      ha-dialog-border-radius: 10px
      
    light:
      lovelace-background: "center / cover no-repeat fixed url('/local/pics/bluespace.jpg')"
      app-header-background-color: none
      ha-view-sections-column-gap: 0px
      ha-dialog-border-radius: 10px

You can also upload a background in the new Sections Dashboard

image
image902×1437 56.6 KB

6

Thank you, but I tried this yaml in so many variants! And, is it really /local/? My home assistant themes are in /homeassistant/themes.

I added file in /homeassistant/themes-pics/back.jpg and added this to the theme:
lovelace-background: center / cover no-repeat fixed url(‘/homeassistant/themes-pics/back.jpg’)
and yes, I also tried /local… with and without double quotes

Still, no background.

However, this works:
background-image: “center / cover no-repeat fixed url(‘https://raw.githubusercontent.com/Nezz/homeassistant-visionos-theme/1.1/themes/night.jpg’)”
lovelace-background: var(–background-image)

therefor I tried with my local file and even that fails:
background-image: “center / cover no-repeat fixed url(‘/homeassistant/themes-pics/back.jpg’)”
lovelace-background: var(–background-image)

and also:
background-image: “center / cover no-repeat fixed url(‘/local/themes-pics/back.jpg’)”
lovelace-background: var(–background-image)

7

local=www so the image needs to be in the www folder if you define the path as local

image
image378×102 1.73 KB

8

Ah, that explains a lot!
I finally have what it needs. And I learned an important thing here. I guess all stuff like pictures needed should be in www.
Thanks, another thing solved… Up to next struggle.

9

Happy to assist!!

10

it is almost impossible to find in the HA docs (unless you know exactly what it is on about, in which case you dont need it…) , but this is the official text:

be ware that this is not a secured folder, and all files there are open to the public… as explained in the red block

if you require secure files, you should file them in the /media share.

you will experience difficulty opening those up to the front-end though…