Path to background image

[OverOwl]

Hi,

I am trying to define a theme for a background image with this code in configuration.yaml

frontend:
  themes:
    happy:
      primary-color: pink
      accent-color: orange
    test:
      primary-color: "#F4D175"
      accent-color: "#0B2E8A"
      background: center / cover no-repeat fixed url('Bilder/test.jpeg')

Fo me everything seems right but the image does not show up. I suspect that something is wrong with the path but I have tried various options and could not resolve the issue.

Thank you!

[Mats789]

Perhaps this works?

@OverOwl

background-image: "center / cover no-repeat fixed url('Bilder/test.jpeg')"

[OverOwl]

Thank you very much!

Unfortunately, it still does not work.

[Mats789]

??

background-image: "center / cover no-repeat fixed url('Bilder/test.jpeg')"
lovelace-background: var(--background-image)

[boheme61]

you need to have a “www” folder under /config …in file editor create a www folder, if it’s not already there
this /www is also called “local”
then you can place the image direct under www or in a new separate folder
/local/image.jpg or /local/images/image.jpg

PS: and dont use capital letters !

[OverOwl]

I have it like this no but still neither of the two test images shows up in my dashboards:

frontend:
  themes:
    happy:
      primary-color: pink
      accent-color: orange
    test:
      primary-color: "#F4D175"
      accent-color: "#0B2E8A"
      background-image: "center / cover no-repeat fixed url('/local/bilder/test2.png')"
      lovelace-background: var(--background-image)

… out of curiosity: why no capital letters?

[boheme61]

https://community.home-assistant.io/search?q=theme%20background%20image

Background image in theme

wondering if anyone out there has added a background image to their theme, I have not been able to get it to work. I can add it to my lovelace config and get it to work, but I have 2 themes, light and dark with an automation and would like to have 2 different backgrounds. this works for only one background in the lovelace config background: center / cover no-repeat url("/local/background_dark2.jpg") fixed but not in the theme.yaml file I have, any thoughts?

… Just for inspiration

@OverOwl

… out of curiosity: why no capital letters?

It’s linux , and best practice is lowercase for files and folders … as you also will notice in the /config structure, and the whole OS for that matter, And a doubt any programmers use capital letters in file/folder path
EDIT: ( b ≠ B )
So it’s basically a bad “Windows” habit to use capital letters, in file/folder structure, and “very doubtful” in programming in HA environment

[OverOwl]

Thank you for the Linux briefing… it has been a while

I found the culprit it has to be lovelace-background

lovelace-background: center / cover no-repeat fixed url('/local/bilder/test.jpeg')