Dashboard with dynamically background

Hi all!

I am trying to change the background of my dashboard, randomly, once at 30 minutes.
In dashboard RAW configuration, I made this

...
views:
  - title: Bedroom
    background: >-
      center / cover no-repeat
      url("/local/backgrounds/{{states('sensor.day_time_weather_custom')}}_{{states('variable.random')}}.jpg")
      fixed
...

The value of this {{states(‘sensor.day_time_weather_custom’)}}_{{states(‘variable.random’)}} is evening_clouds_5.jpg. If I add manually the name of the file, it will work, but I want to change these values in order to change the background dynamically.
Anyone knows what I am doing wrong? How can I use templates in raw dashboard configuration?

Thank you in advance

You would need to use something like this:

It’s JavaScript, not Jinja.

1 Like

Perhaps using this component:

Yes… this is what I am using, but I wanted without other components :slight_smile:

Core Lovelace does not support templates (except in the markdown card content). You need to use custom cards if you want to use templates.

Also I would be wary of using that Animated Background card.

Sadly the developer passed away recently so it is no longer being supported and may break with an update in future, unless someone else makes a fork of the repository and takes on supporting it.

The only way I found to do this is by using card_mod and using a panel type view where you put the top most element (layout card or a stack or whatever) in a mod_card, remove borders/shadows and then you can use card mod css to do whatever you want with the background.

I have to say I only use this to display current playing media art as background, “below” that I use animated_backgrounds. Because the one displays over the other, I can have the media background as entirely seperate logic compared to the time-of-day/weather backgrounds.

o thats interesting, was looking for that just today!

could you help me out here please, how to go about adding the mod card on this panel?

title: Plattegrond
path: plattegrond
icon: mdi:floor-plan
# background: center / cover no-repeat url('/local/images/areas/plattegrond.png') fixed

# type: custom:vertical-layout
panel: true
cards:

  - type: vertical-stack
    cards:

      - 
      - 
      etc

I have darker and lighter themes, so would like to switch to a

 background: center / cover no-repeat url('/local/images/areas/plattegrond_inversed.png') fixed

theme in my darker themes

on regular cards I use config-template-card for that with a

- title: Map
  icon: mdi:map
  type: panel
  cards:

    - type: custom:config-template-card
      entities:
        - input_select.theme
      variables:
        theme: states['input_select.theme'].state
      card:
        type: custom:auto-entities
        filter:
          include:
            - domain: person
        card:
          type: map
          hours_to_show: 48
          dark_mode: ${(/ight|Dark|Matrix/).test(theme)}

on the card config… with a view, I wouldn’t n=know how to proceed.

or, are you saying, in panel mode, we only need to set the background on the vertical-stack?

update

Bingo! You’ve made my day, thank you so very much!

title: Plattegrond
path: plattegrond
icon: mdi:floor-plan
# background: center / cover no-repeat url('/local/images/areas/plattegrond.png') fixed

# type: custom:vertical-layout
panel: true
cards:

  - type: custom:mod-card
    style: |
      ha-card {
        background:
          {{ "center / cover no-repeat url('/local/images/areas/plattegrond_inversed.png') fixed"
              if states('input_select.theme') is search('ight|Dark|Matrix', ignorecase=True)
              else
              "center / cover no-repeat url('/local/images/areas/plattegrond.png') fixed" }};
      }
    card:
      type: vertical-stack
      cards:

works beautifully indeed!

Of course, its still not the same as setting a regular views background, but this comes close, and since I would be using it on only a couple of views, that indeed benefit from panel mode, I am not complaining :wink:

btw, this is a neater template for that:

{% set dark = states('input_select.theme') is search('ight|Dark|Matrix', ignorecase=True)%}
{% set extension = '_inversed' if dark else '' %}
{{"center / cover no-repeat url('/local/images/areas/plattegrond"~extension~".png') fixed" }}

I’ve been googling and asking in the forums to do the same.
Another option is I guess to have a py script running that either updates your mushroom,yaml file OR you can instead rename the file that the theme points too on a regular basis. Not sure how to run py scripts like that though, I guess has to be done at the OS level as a chron or something.

This is the only solution till now… Which is an outdated addon

Maybe you can try this fork

1 Like

thank you! i’ll take a look