Different backgrounds for each views

JayF · October 14, 2019, 1:00pm

Good day,

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.

Thanks for your help!

JayF · October 14, 2019, 1:04pm

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).

JayF · October 14, 2019, 2:53pm

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:

weather:
  background: 'center / cover no-repeat url("/local/background-lovelace/views/weather2.jpg") fixed'
  lovelace-background: 'center / cover no-repeat url("/local/background-lovelace/views/weather2.jpg") fixed'

I’ve used both background and lovelace-background.

When it comes to lovelace, here is the main yaml:

resources:
  - url: /local/custom-lovelace/weather-card/weather-card.js
    type: module
  - url: /local/custom-lovelace/mini-graph-card/mini-graph-card-bundle.js?v=0.6.0
    type: module
  - url: /local/custom-lovelace/bar-card/bar-card.js
    type: module
  - url: /local/custom-lovelace/vertical-stack-in-card/vertical-stack-in-card.js
    type: module
  - url: /local/custom-lovelace/card-modder/card-modder.js
    type: js
  - url: /local/custom-lovelace/mini-media-player/mini-media-player-bundle.js
    type: module 
  - url: /local/custom-lovelace/card-tools/card-tools.js
    type: js
  - url: /local/custom-lovelace/button-card/button-card.js
    type: module 
  - url: /local/custom-lovelace/spotify-card/spotify-card.umd.js
    type: module 
  - url: /local/custom-lovelace/layout-card/layout-card.js
    type: module 
  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
    type: module

background: var(--lovelace-background)
views: !include_dir_list ui-lovelace/

and in the “ui-lovelace” folder, there is a file named 040-weather.yaml which is the weather view itself:

    title: Weather
    icon: mdi:weather-sunny
    background: var(--lovelace-background)
    theme: clear
    cards:
      - type: weather-forecast
        entity: weather.home
      - type: entities
        title: Sunlight Information
        show_header_toggle: false
        entities:
          - sun.sun
      - type: custom:weather-card
        entity: weather.home
        name: Meteo SJSR
        icons: "/local/custom-lovelace/weather-card/icons/"

as you can see, I’ve tried background: var(--lovelace-background) at both the lovelace main YAML and the weather view itself.

Any thoughts would be greatly appreciated because I’m lost. Thank you!

uiguy · October 14, 2019, 3:12pm

I do this for each of my views… you need to apply the background image per view. The below is taken from my raw config editor for my “Finance” View

  - background: center / cover no-repeat url("/local/money.jpg") fixed
    badges: []
    cards:
      - entities:
          - entity: sensor.starling_effective_balance
          - entity: sensor.starling_cleared_balance
        title: Finance
        type: glance
      - aspect_ratio: 75%
        title: GBP -> ZAR
        type: iframe
        url: >-
          https://s.tradingview.com/dailyfx/widgetembed/?frameElementId=tradingview_344a1&symbol=FX_IDC%3AGBPZAR&interval=D&hidesidetoolbar=0&symboledit=1&saveimage=1&toolbarbg=f4f7f9&studies=%5B%5D&hideideas=1&theme=White&timezone=exchange&studies_overrides=%7B%7D&overrides=%7B%7D&enabled_features=%5B%5D&disabled_features=%5B%5D&locale=en&utm_source=www.dailyfx.com&utm_medium=widget&utm_campaign=chart&utm_term=FX_IDC%3AGBPZAR'
    icon: 'mdi:cash-multiple'
    path: finance
    title: Finance

The key things here are:

Make usre you have your indentation right
Get the image url…

JayF · October 14, 2019, 3:21pm

It worked!!! I am able to get the background applied for a view only! Much appreciated!

uiguy · October 14, 2019, 3:23pm

you sound surprised …np

JayF · October 14, 2019, 3:25pm

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!

uiguy · October 14, 2019, 3:30pm

no worries buddy, that is what we are here for… glad you got it working…

JayF · October 14, 2019, 3:38pm

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…

uiguy · October 14, 2019, 3:49pm

I messed around with dynamic/animated backgrounds but then got sidetracked… squirrel! . …

Haven’t looked at it for a while, but have a look here: Lovelace: Animated Background based on entity state

Lovelace is really a lot of CSS, so if you can get your head around that, then generally, just use HACS to get the views etc you need…

JayF · October 14, 2019, 4:39pm

Woah thanks again! Will be looking at it later for sure!

Vjmaz · June 30, 2021, 8:38am

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

Diligence · March 10, 2024, 7:24am

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?

Vjmaz · March 11, 2024, 7:40am

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

have fun

Hope this helped Peter

Regards Maz