Trying to get a background loaded

Hi guys,

since days I try to get a background into my Lovelace. I’m using so no Lovelaceui.yaml. I created a www folder in the config folder of Hassio.

Here is my config for my UI (at least just the home view for trying :slight_smile: )

title: Home
  - background: var(--background-image)
      - sensor.windgeschwindigkeit
      - sensor.temperatur
      - sun.sun
      - entity: weather.dark_sky
        type: weather-forecast
      - default_zoom: 18
          - entity: person.xxxx
          - entity: person.xxxx
        type: map
      - entities:
          - entity: binary_sensor.
          - entity: binary_sensor.
        show_header_toggle: false
        title: Fensterstatus
        type: entities
      - entity:
          action: more-info
        icon: 'mdi:xxxx'
          action: toggle
        type: entity-button
    path: default_view
    title: Home

Any Idea? Did also several restarts.

do you have --background-image set inside your theme?

This is what I use:

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

Erm…no :man_facepalming: : to be honest I dont have a theme yet. I just want to have the background loaded. I also can’t find a file or folder which is suggesting it contain themes :confused:

Not sure what to do…

First, create a themes.yaml file in your config directory and put your theme code in there. You can do a search in the forum for many different themes.

Then add this to configuration.yaml:

  javascript_version: latest
  themes: !include themes.yaml

Great! Thanks a lot.

Can I also add the few lines above when I just want to start with a background?

I don’t use a background yet but I think you can just use a background in lovelace by explicitly defining a path to the image. What you did in your first post was define a background image by referencing a variable which you would normally define in a theme.

since you don’t use themes then you need to tell it where the file is. try using @petro’s config but use your own file name/location

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


I tried this too but the background didn’t show up. I tried it with a special folder and with the www folder.

I put the code in several positions in the Lovelace confit with no success :neutral_face:

I put a background image into the /www/ folder and then in the lovelace view I put this in and it worked for me:

title: Main
background: center / cover no-repeat url("/local/background_dark_1.jpeg")
1 Like

Hmmm… no success. I have a www folder in my config folder. On it an image called dark.jpg. I put this into the Lovelace editor (screenshot because c’n’p is not working on iOS)

Nothing. I tried with "/local/www/dark.jpg" too

Try removing the dash in front of background:

If you want it on all views. PLace it outside all the views:

In the example blow, I placed my file in this dirctory /config/www/images/ with the filename background.jpg. Making a full directory path /config/www/images/background.jpg. When referencing the file inside lovelace.yaml or the GUI lovelace, you will use /local/images/background.jpg.

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

… a just in case type of suggestion ( I apologize if it seems super obvious but you never know…). Are you refreshing the page after you make the changes? Lovelace seems to get “stuck” until you force a refresh.

Thanks guys. But still no success here.

The dash was put there automatically. I refresh AND restart the server every time.

Here is my config:

title: Home
background: center / cover no-repeat url("/local/images/night.jpg") fixed
  - badges:
      - sensor.windgeschwindigkeit
      - sensor.temperatur
      - sun.sun

I put now into the www folder a subfolder named images.

If you look in the HA logs do you see any errors?

Do you have the right permissions set on the image file?

No errors. I need to set permissions? I’m using the configuration tool in hassio to edit my config. What do i need to do?

Please take a screenshot of your config folder, where configuration.yaml is located.

Not sure under HASSIO.

Under HA I originally added a background and got an error message about permissions. Set the permission on the background file to homeassistant and it worked.

That’s not needed for hassio. Don’t have the ability to change permissions anyways in hassio.

I suppose I should ask this too, but are you clearing the cache during your refreshes? CTRL+F5

Come with me on a trip to my folders and files :slight_smile: And yes…cache is cleared.