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(...)}});
1 Like
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.