Trying to get a background loaded

Flo.C · March 24, 2019, 11:38am

Hi guys,

since days I try to get a background into my Lovelace. I’m using Hass.io 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 )

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

Any Idea? Did also several restarts.

petro · March 24, 2019, 12:13pm

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

Flo.C · March 24, 2019, 12:32pm

Erm…no : 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

Not sure what to do…

finity · March 24, 2019, 1:41pm

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:

frontend:
  javascript_version: latest
  themes: !include themes.yaml

Flo.C · March 24, 2019, 3:07pm

Great! Thanks a lot.

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

finity · March 24, 2019, 4:15pm

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
views:
  - background: center / cover no-repeat url("/local/images/background.jpg") fixed

.

Flo.C · March 24, 2019, 6:24pm

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

finity · March 24, 2019, 8:04pm

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")
cards:
  .
  .

Flo.C · March 24, 2019, 11:07pm

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

finity · March 25, 2019, 1:31am

Try removing the dash in front of background:

petro · March 25, 2019, 1:57am

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
views:
  etc..

Bartem · March 25, 2019, 2:01am

… 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.

Flo.C · March 25, 2019, 8:56am

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
views:
  - badges:
      - sensor.windgeschwindigkeit
      - sensor.temperatur
      - sun.sun
    cards:

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

jwelter · March 25, 2019, 2:37pm

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

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

Flo.C · March 25, 2019, 4:10pm

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?

petro · March 25, 2019, 4:13pm

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

jwelter · March 25, 2019, 4:13pm

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.

petro · March 25, 2019, 4:14pm

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

petro · March 25, 2019, 4:16pm

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

Flo.C · March 25, 2019, 4:59pm

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