I’ve been searching around the forum regarding how to implement a background image for a view. Pretty much all I’ve seen so far is a background set by a theme. My understanding would be that the very same background image would be applied lovelace-wide for every views.
The main goal would be to have a sunny beach background for the Weather view and rackmount servers for the System Information view. I would love to have different backgrounds and, if possible, later on, have different styles so I can arrange the look and feel of each and every views.
So, the very first objective woud be to have different backgrounds. If there is a way to set a theme specific for a view, then that would provide me the best flexibility.
Oh, I’ve found it seems like possible to set a theme for a view… Will be investigating this and report back. (I haven’t think of setting a theme for a view before I started to type this post).
It went partially well… right now, I am unable to make the background image show in the Weather view… but it will show lovelace-wide across all views when selecting the “weather” theme I have created specifically for testing purposes.
I’m absolutely lost… but since I’ve been able to show the background image site-wide, it means the path to the file is correct.
here are the config:
configuration.yaml:
frontend:
themes: !include_dir_merge_named themes
inside the folder “themes”, there is a file named weather.yaml:
hahha well I’ve been struggling for a while… and I was trying to make it work through the theme feature… I was using - background: in the view file but was refering to a theme variable… I haven’t think of literally use that property to actually point directly to the jpg file.
Glad you took a few minutes!
Oh, I realized the background: var(--lovelace-background) at the view level was working when I cleared the cache… but only once!
Like, 'say I clear the browser cache, then I’ll log back into HA, and go to the Weather view and the backgroung will show using background: var(--lovelace-background)… but when clicking on another view and THEN going back to Weather, the background isn’t there anymore… it shows the regular white-color background.
Do you know the reason why it would behave like that? I’m much more a core guy than UI… so any thoughts might help! Setting the background like that would allow me to dynamically change it depending of the actual weather (for example).
I have a solution now that works, but still curious about the behavior I’m having…
life saver i have been traying to get a .gif file as a background and all i had to do was add the one line you metioned Awesome : " - background: center / cover no-repeat url("/local/money.jpg") fixed " Thank you so much
Hi Vjmaz. I have been trying this for about an hour now. I have change the .jpg name but it just blanks the whole view. Where did you put the image?
Does the “local” mean HA will search the whole file locations for the image?
Hi Diligence ( Peter ) local for me was inside the www folder …
So, for example, my home assistant is install on IP 192.168.0.75 … now you need to be able to get to it via ftp or folder share ( I use Folder share with an ADDON called "Samba share " .
\192.168.0.75 \config\www\ place pic in here
Hope this helps you I have added pics if that assists.
As you can see I am using a family pic as background on a for a simple Date and Time I wanted in one of my dashboards by using a Picture Elements Card Configuration it allowed me to add my background also adjust the writing locations and color