Theme option for card background image?

Configuration Frontend
1

Is there a theme option for card background images?

I can set a card background with card mod:

style:
  ha-card {
    background: url('/local/images/background/card_bg_night.png');
  }

But I would need this image to change when I change to my “day” theme.

I found that the paper-card web element only seems to have a header image, paper-card-header-image but I can’t get this to display anything in my cards when I set it in my themes.

The home assistant entities card header supports an image but again not only is that hard coded and unable to be changed with the theme, it also appears above the title text not behind it, as I can and want do with a card background.

1 Like
2 
  ha-card {
    background: 
        {% if is_state('sun.sun', 'below_horizon') %}
          url('/local/background/card_bg_night.png');
        {% else %}
          url('/local/background/card_bg_day.png');
        {% endif %}
  }
1 Like
3

yes, another way would be like this:

type: custom:dark-sky-weather-card
style: |
  ha-card {
    background: url("/local/images/weather-background-{{states('sun.sun')}}.png");
    background-size: 100% 400px;
    --primary-text-color: var(--primary-text-color);
    --secondary-text-color: var(--secondary-text-color);
    --paper-item-icon-color: var(--primary-text-color);
  }
1 Like
4

how to use background in custom botton card?
trying that:

type: custom:button-card
name: Test Button
card_mod:
  style:
    ha-card {
      background: url('local/pictures/lampka.png');
    }
entity: sensor.0x00158d0001dffd4b_battery

and there is no background

5

the card_mod is for the dark_sky custom card (note the syntax has changed a bit, add card_mod: :

type: custom:dark-sky-weather-card
card_mod:
  style: |
    ha-card {
      background: url("/local/images/weather-background-{{states('sun.sun')}}.png");
      background-size: 100% 400px;
    }

Schermafbeelding 2022-05-30 om 15.21.13
Schermafbeelding 2022-05-30 om 15.21.13810×468 36.3 KB

and also works on a regular entities card:

    - type: entities
      card_mod:
        style: |
          ha-card {
            background: url("/local/images/weather-background-{{states('sun.sun')}}.png");
            background-size: 100% 400px;
          }

      entities:
        - entity: input_number.test_level_1
          name: Level
        - entity: sensor.test_sensor_battery
          name: Level
        - type: section
        - entity: input_number.battery_level_critical
          name: Critical
        - entity: input_number.battery_level_warning
          name: Warning
      state_color: true

sorry you asked for button-card: wrong thread, go here :wink: and button-card uses different, Javascript, templates, not Jinja.