Is there a way to embed a background into the Theme? I have seen tons of post where you put it in the lovelace file but I was curious if you can put in theme to call each time the theme is added as long as the image is in the /local/image folder or something like that. I have had really no luck with getting it to work in the lovelace file under the raw editor. I would prefer it be in the theme it is applied too.
See the link below for identifying by theme.
Your Lovelace file also needs to point to that variable in the theme.
Does it matter where you put it in the theme file? I put it here:
…
Background colors
lovelace-background: center / cover no-repeat url("/local/images/green.png") fixed
primary-background-color: ‘var(–dark-grey-color)’
secondary-background-color: ‘var(–dark-grey-color)’
divider-color: ‘rgba(0, 0, 0, .12)’
table-row-background-color: ‘var(–medium-grey-color)’
table-row-alternative-background-color: ‘var(–medium-grey-color)’
…
Also is there a right size to use as a background so it does expand so large?
From my experience order doesn’t matter.
I haven’t had to deal with this as I have a pretty non-descript image. I wouldn’t really be able to tell if it was sized oddly.
Ok thanks I am testing out different sizes. I got it to work so that is a large leap.
@silvrr I got the background to show up but on some tabs when you change over the background starts to zoom into it making it bigger. I used the fixed statement so it should be the same on all tabs in lovelace. I also put the backgroud statement into the lovelace section using raw editor. Now I am not sure if it makes a difference that I am not using the ui-lovelace.yaml file and using the built in editor or not. Here are two examples of what I am referring too.
Not sure why that is happening.
Are you running any custom cards that can manipulate the background?
Humm not sure I don’t think so but I will dig into that.
I have the same thing. I use a pic of my house as a background picture and added a line at the top of my lovelave code:
background: center / cover no-repeat fixed url('/local/images/BnWRear.jpeg')
title: Longitude 9° Control Panel
views:
but it sticks to my cards. It would be nice to have a fixed back ground picture while sliding your menus or cards over it but I can’t figure it out…
try background-image not background.
edit: looks like I am using both methods with the same result. Not sure why your cards are sticking.
example from my current setup.
In ui-lovelace.yaml file:
and then in the theme:
I have tried background-image but then the picture doesn’t show.
In Safari browser the cards slide over the picture but in all other (firefox laptop and apps and Safari phone and iPad ) the picture sticks to the cards. Same settings different outcome.
I have tried repeat and non-repeat no impact. Same for fixed.
And exactly as GDreelin describes the background picture sizes up with the the cards. So if I have more cards the picture sizes bigger. So something with the ratio setting or so. But I don’t know where to manipulate that.
Anyone found a resolution to getting the background to stay in fixed position?