Dynamic background change - sections dashboard

Configuration Frontend
1

hey, is it possible to dynamically change the dashboard background somehow depending on the input_bool state?

I wanted to do it like this, but it didn’t work (the background disappeared completely):

background: >
  {% if is_state('input_boolean.widget_pietro_parter', 'on') %}
    url("/local/floor_plan/tlo.png")
  {% else %}
    url("/local/floor_plan/tlo2.png")
  {% endif %}
2

One method I am aware of is to use a custom theme.

The code below is just an example. I recommend reviewing this thread for more info and possible better methods.

Boolean Theme:
  modes:
    dark:
     app-header-background-color: transparent    
    light:
     app-header-background-color: transparent

  card-mod-view: |
  
    hui-sections-view {
      {% if is_state('input_boolean.widget_pietro_parter', 'on') %}
        background: center / cover no-repeat url('/local/floor_plan/tlo.png');
      {% else %}
        background: center / cover no-repeat  url('/local/floor_plan/tlo2.png');
      {% endif %}  }

  card-mod-theme: Boolean Theme

I do not use themes so I do not regularly keep up on the updates…

3

And this is a variant for any kind of dashboard layouts:

test_background_dynamic:

  card-mod-theme: test_background_dynamic
  card-mod-view-yaml: |
    .: |
      masonry-layout, horizontal-layout, vertical-layout,
      hui-masonry-view,
      hui-sidebar-view,
      hui-sections-view,
      hui-panel-view {
        {% if ... -%}
          background-image: url('....');
        {%- else -%}
          background-image: url('....');
        {%- endif %}
      }

where we also can use the “background” property as was suggested above, even with dynamic urls like

background: center / cover no-repeat url({{state_attr(...)}});
2 Likes
4

Love it, that is really solid!! I need to play catch up on the updates from your original work!

5

Also, try with this )))

background-image: url('https://media.giphy.com/media/1fkD7WKKpubBTnqAm8/giphy.gif');

GIF can be used.

6

How do I get this working, I want background change to artwork while playing media player, this does not work for me:

    player_background:
      card-mod-theme: player_background
      card-mod-view-yaml: |
        .: |
          sections-layout, masonry-layout, horizontal-layout, vertical-layout,
          hui-masonry-view,
          hui-sidebar-view,
          hui-sections-view,
          hui-panel-view {
            {% if is_state('media_player.youtube_music_player','playing')%}
            background-image: {{ (states['media_player.youtube_music_player'].attributes.entity_picture_local) }};
            {% endif %}
          }
7

This is working

player_background:
  card-mod-theme: player_background
  card-mod-view-yaml: |
    .: |
      sections-layout, masonry-layout, horizontal-layout, vertical-layout,
      hui-masonry-view,
      hui-sidebar-view,
      hui-sections-view,
      hui-panel-view {
        {% if is_state('media_player.youtube_music_player','playing')%}
        background-image: url('{{ (states['media_player.youtube_music_player'].attributes.entity_picture_local) }}');
        {% endif %}
      }