Trying to understand Lovelace background images

Configuration Frontend
1

Hi all,
Please forgive my lack of knowledge here as I’m new to HA and YAML. I started tinkering with themes recently and I downloaded a theme where the background image line in the YAML file looks something like this:


lovelace-background: ‘center / cover no-repeat fixed url(data:image/jpeg;base64,/longstring…..)

I want to replace it with a png I uploaded to my /www/ folder but it seems to be harder than just replacing the URL portion with something like this:


lovelace-background: center / cover no-repeat fixed url(‘/local/background.png’)

I believe it has something to do with the base64 encoding? But not very familiar with that at all…
Any help would be appreciated!

2

What theme?

3

@stevemann I think it’s called transparent blue

4

This format worked fine for me when I edited the theme’s yaml.

lovelace-background: center / cover no-repeat fixed url('/local/pics/space.png')

image
image926×352 16 KB

image
image1566×770 85.5 KB

Do you have the file background.png stored in the www folder? local=www

5

@LiQuid_cOOled thanks for confirming!
I retried a few times until I realized there was a single quote at the beginning of the code right before the word center and I was deleting everything after URL( and replacing it. I just replaced the whole line with what should work and indeed it did. Thanks again for your help checking!

6

You’re welcome!

Please consider closing out the thread with the Solution tag.

It will automatically place a check-mark next to the topic’s title which signals to other users that this topic has been resolved. This helps users find answers to similar questions.

7

You got it!
Also, in case you have knowledge/experience on this: why was there single quotes around that section of the code? I know that in other languages // is used for commenting something out for example. Is that similar to this in YAML or does it serve a different function?