Background Image on Default Theme

Configuration Frontend
1

I don’t understand why this is so difficult, all I want to do is have a background image to use with the default theme. Can someone please explain to me how to do what should be a simple task. I’ve tried using custom themes, but the images don’t load, I’ve tried adding code to the lovelace.yaml with the raw editor, no image. The image is available via /local/file.jpg but it won’t show up as the background no matter what I try.

Ideally I’d like to just upload the background to use for whichever theme I have applied so that it gets applied automatically to whoever is using it and they don’t have to select it. This can be done in all of 5 seconds with homekit, but in HA it seems to be damn near impossible.

2

unfortunately, this isn’t a “simple Task” as the default theme does not really support any background image.

What you can do is:

  • define a new theme in your configuration, and set the background image you want there - just use the background image information, everything else should then remain as the default.

but I guess, as soon as you might switch to another custom theme, the background image will be removed.

3

What path would I have to put in? Looking at dev tools it looks like it’s looking for a file like this

Https://myhasite.com/lovelace/local/background.jpg

But I don’t have anything anywhere telling it to use that directory.

4

I set this as my theme, but the wallpaper still doesn’t show up

Wallpaper:
    # Home Assistant override
    background-image: "center / cover no-repeat fixed url('https://myhainstance.com/local/media/images/backgrounds/homekit-bg-blue-red.jpg')"
    modes:
        light: {}
        dark: {}
5

What i do is the following:

I uploaded the picture in the www folder called bluesplashbackground.jpg (you can use any name.

Then i edited the theme i have and added the following code:

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

Please note that my theme has both light and dark modes so i pasted the above code in the dark mode that i am using. This gives you the possibility to upload differend images per mode in case you use both light and dark. Here is the full code:

  # Card mod theming
  card-mod-theme: Blue Splash
  # Light/dark mode support
  modes:
    light:
      primary-background-color: rgb(255, 255, 255)
      secondary-background-color: rgb(243, 243, 243)
      primary-text-color: rgb(0, 0, 0)
      secondary-text-color: rgb(100, 100, 100)
      sidebar-selected-icon-color: var(--primary-color)
    dark:
      primary-background-color: rgb(0, 0, 0)
      secondary-background-color: rgba(32, 33, 36, 0.7)
      primary-text-color: rgb(255, 255, 255)
      secondary-text-color: rgb(180, 180, 180)
      sidebar-selected-icon-color: var(--light-primary-color)
      lovelace-background: 'center / cover no-repeat url("/local/bluesplashbackground.jpg") fixed'

As i am using only the dark mode, i haven’t added any code under the light mode.

Hope this helps

6

It seems that the HA gods have listened to me. Check out the beta release notes for 2024.6 on rc.home-assistant.io

7

This lovelace-background selector is that new?
I had always used background, it worked until the last core update.

When looking in the developer tools, I saw the image link in the background selector. If clicked on it will load the correct image.

So get confused and thought something else was overriding the background property.
Looking for answers for the last week or so I stumbled on this thread here tonight.

Is there someplace, a page or something where these kinds of changes are discussed
Since the March 2023, every update with frontend changes has been breaking my custom dashboard or theme.

8

The background is new as of 2024.6