How to add a picture as a lovelace background?

Configuration
1

Hi,

I’m having trouble adding a background to Lovelace. I’ve got a theme I found online and have added the following:

  background-image: "center / cover no-repeat fixed url('https://live.staticflickr.com/3798/11051378005_50b62511bb_b.jpg')"

I also tried:

  background-image: "center / cover no-repeat url('/local/backgroundname.jpg')"```, however I don't have a local folder so my image is in www/media/backgrounds/filename.jpg.

Thanks for your help!
1 Like
2

Try removing the double quotes.

background-image: center / cover no-repeat fixed url('https://live.staticflickr.com/3798/11051378005_50b62511bb_b.jpg')

3

Thanks, I tried that but no go. This is what I’ve got for the main interface colours:

  ### Main Interface Colors ###
  primary-color: "#A3A3A3"
  light-primary-color: "#C5C5C5"
  background-image: center / cover no-repeat fixed url('https://live.staticflickr.com/3798/11051378005_50b62511bb_b.jpg')
  primary-background-color: "#272727"
  secondary-background-color: var(--primary-background-color)

Is there something in there that is conflicting?

Thanks!

4

Oh, I thought you were talking about background under View which works for me:

views:
- title: Main
  id: Main
  background: center / cover no-repeat fixed url('https://live.staticflickr.com/3798/11051378005_50b62511bb_b.jpg')

you are probably talking about applying theme to a View, like here?
Then, that should be like:
lovelace-background: center / cover no-repeat url("/local/background.png") fixed

7 Likes
5

Thanks! I’ll give that a try. What’s the difference between view and theme? Does view allow you to choose a different image for each tab?

6

Thanks for your advice for the View option, I had to tweak the location but it worked a treat.

The theme worked a treat as well!