Background image in theme

Share your Projects! Themes
1

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?

2

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.

3

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

4

Did you ever work out a way to do this?

5

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

6

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

ā€œā€“backgroundā€ being the name you gave in your theme.

3 Likes
7

Ah interesting, so how do you declare the variable within the theme? Something like:
background-image-clear=/local/by.jpg

8

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
9

Sound good, Iā€™ll give it a shot!

1 Like
10

This is the exact code in the theme

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

2 Likes
11

Hi,

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?

Thanks.

1 Like
12

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!

13

Hi

do you know how can i use JavaScript as background?


1 Like
14

I love thatā€¦ will be greate if some guru can implement this.
Thanks

15

I have used particles.js as a background and it totally killed performance of HA site

16

Sorry to revive, butā€¦ How? Iā€™m just learning about JS coming from python and everything is super confusing lol.

17

Adding lovelace-background to the theme applies to all views.

18

How do I keep the background in fixed using var(--background) defined in raw view?