tom_l
May 18, 2020, 10:50am
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
tom_l
May 18, 2020, 2:42pm
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
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
milutm
(Milutm)
May 27, 2022, 12:12am
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
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;
}
milutm:
background:
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 and button-card uses different, Javascript, templates, not Jinja.