Changing background for dashboards

Configuration Frontend
1

Hi all. I’m trying to add a static jpg to all dashboards, but I’m coming up empty-handed. I’ve googled and youtube’d, but none of the suggestions I’ve come across seem to work. Most of the posts tell you to add this to configuration.yaml:

background: center / cover no-repeat url("/local/images/pic.jpg") fixed

I created a /www/images folder and dropped the file there. In reading directions, the www folder redirects to /local. So in my case, it’s /local/images/pic.jpg. But, no matter how I code it (with both single and double quotes), HA complains that ‘background’ isn’t valid and it prevents be from rebooting. There has to be an easy way to do this, I just can’t figure it out.

My current code is:

# Theme background image
background: center / cover no-repeat fixed url('/local/images/pic.jpg')
2

Where is this?

In your configuration. yaml file?

If so you need:

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

You must then apply the theme in your profile on each device.

Untitled
Untitled1441×926 73.1 KB

3

Thanks for this. I got the code corrected in configuration.yaml, and after a restart, I see the theme name.

However, I lost the Metrology Purple theme I had previously and I don’t see the background image (bg is solid white). It also complained about the !include_dir_merge_named themes line I had. Is it possible to have the Metrology theme and add the jpg independently?

# Themes
frontend:
  #themes: !include_dir_merge_named themes
  themes:
    Hexagon:
      background: center / cover no-repeat fixed url('/local/images/Hexagon-floor.jpg')
4

Then you need to add it to your existing theme instead.

5

Thought that might be the case. I’ll do some sleuthing here then. Seems like this would be a good use case for separating theme and background image at the code level, possibly in a future release.

6

Hi everyone,

I want to do the same and therefore I’ve added this code to my configuraion.yaml:

frontend:
  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js
  themes:
    brushedblue:
      background: center / cover no-repeat fixed url('/local/backgrounds/brushedblue.jpg')

After reload/restart I can select the theme both, in person settings on a device or directly in one of the dashboards, but the background is not showing neither in web nor on my phone.

The url is correct as I tested it in a markdown card and the image is shown.

What am I doing wrong?

thx in advance for any hints,
zavjah

8

HI there,

I found the solution in another post, it mus like like this:

frontend:
  themes:
    brushedblue:
      lovelace-background: 'center / cover no-repeat url("/local/backgrounds/brushedblue.jpg") fixed'
2 Likes
9

I was able to get this to work, but i think i have to sacrifice using my current theme that has a dark mode and also card shapings just to use my own preferred background. Thanks to all of the above into for providing somewhat of a pathway that i could stitch together and eventually get something to work… I agree that this is kind of BS. Applying your own background and still getting to use a theme should be a much easier thing to do…

10

You can set backgrounds by dark and light mode.

Your Theme:
  modes:
    dark:
      lovelace-background: center / cover no-repeat fixed url('/local/pics/space.png')

    light:
      lovelace-background: center / cover no-repeat fixed url('/local/pics/bluespace.jpg')
11

Noice! again still having to forego the theme i was using, but having at least the dark mode is something i can live with. Thanks for this!

1 Like
12

For the most part, you should be able to combine code from themes. I’m not sure what you are y using exactly, but glad I was able to assist.

13

I was using the Metrology theme…

What i was driving at was, why isn’t there just simply a place in the user settings that says ‘upload your background here’ and a user uploads a picture and that’s the background for all screens in HA…imo that would be a simpler thing to do for everyone…js

14

I agree, there is a push to make the GUI more user friendly. Just a heads up, you can always open a Feature Request. I didn’t check to see if there is already one open on this topic.

If you are the original requester don’t forget to vote for your own idea.

1 Like