Background image in theme

wondering if anyone out there has added a background image to their theme, I have not been able to get it to work. I can add it to my lovelace config and get it to work, but I have 2 themes, light and dark with an automation and would like to have 2 different backgrounds. this works for only one background in the lovelace config
background: center / cover no-repeat url("/local/background_dark2.jpg") fixed
but not in the theme.yaml file I have, any thoughts?

Are you planing on using your theme with lovelace? In lovelace you can set a background for all views or individual backgrounds for each tab.

I have lovelace setup but not the main frontend yet, basically I can flip the switch but want it the way I want before I do that. I am very close just a few things left. Basically I have the automation set to light for above_horizon and dark for below_horizon. I want all backgrounds to be the same just change for sun up and sun down with the theme change

Did you ever work out a way to do this?

Also interested of this is possible.
Anyon managed to get a result?

Yes, I got a background to work. you have to add this to the root every lovelace view in the raw config editor.

background: var(--background)

So like this:

- title: something
  type: something
  background: var(--background)

“–background” being the name you gave in your theme.


Ah interesting, so how do you declare the variable within the theme? Something like:

Yes, I changed it to match the name given above from “background-image-clear” to “background”

I found this info on Clear Theme

1 Like

Sound good, I’ll give it a shot!

This is the exact code in the theme

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


I have tried to modify the background image to my own image.

It works perfectly on PC Chrome browser, but not good in mobile app Chrome browser whereby the background image is scaled bigger and become not nice.

So how to solve this issue in order one background image works perfectly on both PC Chrome browser and mobile app Chrome browser?


1 Like

I think you have to play around with the “center / cover no-repeat” part. I don’t know the values you can change it too but you probably have too search for CSS tags too position images.

Maybe take a look here: CSS image positioning - W3 schools

I don’t know if it will work because I also got the info from a forum post. Let me know if you figure it out!


do you know how can i use JavaScript as background?