Cannot get background image to show in dashboard

Configuration Frontend
1

After so long creating my scripts and automations etc, I’ve decided to start out on developing my dashboard and I’m probably doing something wrong but I’m stuck right at the beginning and cannot get my locally stored image to show on the dashboard background. NOTE: I have used a 3rd party theme (copy and pasted to my own theme file) as my basis, to edit and personalise.

I have:
configuration.yaml

frontend:
themes: !include_dir_merge_named themes

/config/themes/my_theme/my_theme.yaml

my_theme:
  # Global
  background-image: center / cover no-repeat fixed url(/local/images/dark-blur-bg.png)
  lovelace-background: var(--background-image)
  primary-color: "#209cee"
  light-primary-color: "#B6B6C1"
  primary-background-color: "#212121"
  secondary-background-color: rgba(25, 25, 25, 0.7)
  divider-color: var(--primary-background-color)
  accent-color: rgba(255, 159, 9, 1)

And using the raw config editor in my dashboard:

views:
  - title: Home
    theme: my_theme
    background-image: center / cover no-repeat fixed url('/local/images/dark-blur-bg.png')
    cards:
      - type: entity
        entity: sensor.disk_use_percent

It’s my first attempt at this, so what am I doing wrong?

**EDIT - I only want this theme in one particular dashboard, and not all of HA, so I have not selected my_theme in Profile > Theme

2

So, after much playing about and frustration I figured out that HA doesn’t like ‘-’ in file names.

I had to change background-image: center / cover no-repeat fixed url('/local/images/dark-blur-bg.png') to background-image: center / cover no-repeat fixed url('/local/images/darkblurbg.png') and it worked.

Simple things!

1 Like