Setting a background image

Configuration
1

Hi,
I need a step by step.
I got a .jpg picture uploaded to my /config folder but also next to my lovelace.yaml file (same image, same name).
I’ve tried a lot of things with this command but I can’t get it to work. I have dark ios theme installed now.

background: center / cover no-repeat fixed url('picture.jpg')
2

You need to create a config/www folder, put your image in there, adjust your picture URL to ‘local/picture.jpg’ and restart.

1 Like
3

In the raw config or somewhere in the ios-dark-theme.yaml?

4

Still having trouble with this… It does appear sometimes… any good guides out there?

5

Nobody? I’ve edited the dark-ios.yaml with /local/picture.jpg and put the picture in /config/www/picture.jpg.
Also in the raw-formatting I’ve tried the same thing…

6

Until recently this worked but after the last Home Assistant update it stopped. Does anyone know how it can be solved?

7

bump

ive spent hours on this and im unable to set a background too.

im running the latest ha

this is what ive got in my config

frontend:
  themes:
    my_theme: # call it whatever you want
      background: center / cover no-repeat fixed url('/local/images/pic.jpg')

when I set a theme on the dashboard it comes up with “my theme” but selecting it does not change the background.

8

OK, I’m running into a similar issue. All I want to do is have a single background image that is common to the system (i.e. for all the dashboards).

  1. Downloaded a hi-res (7.7MB) image of the Milky Way. Put it in a folder under www called images. The file is named MilkyWay.jpg

  2. In the Themes folder, created another folder named MilkyWay, and under that have a YAML file called MilkyWay.yaml

  3. Contents of yaml file are:
    MilkyWay:
    background: center / cover no-repeat fixed url(’/local/images/MilkyWay.jpg’)

After a reboot, I can select MilkWay as a theme, but sadly, the image is not displayed - I just get a regular white background :frowning:

is this process properly documented anywhere?

Or (even better), is there a way to achieve this without using a theme. It strikes me that this should be a really simple thing to achieve.

9

try lovelace-background: 'center / cover no-repeat url("/local/pic-name.jpg") fixed'

This is what I’m using in my autumn.yaml file

autumn-leafs:
  # Background image
  lovelace-background: 'center / cover no-repeat url("/local/autumn.jpg") fixed'