Hey, I am wanting to see if there is a way to change the background image of a card that I am using card-mod to apply the background to, basically I want to use the image of a background based on if the sun is above or below the horizon.
I have a test page I used to create all my cards before I move them to the correct page I want them on, I managed to do what I wanted once, I copied the code for the card to the final page and it broke, when I went and tested/checked the test card I create it to lost the background image, the code I am using is below, if anyone has any idea’s or a better way of doing what I am trying to do I am all ears.
title: Sun
show_header_toggle: false
state_color: true
type: entities
entities:
- entity: sun.sun
type: custom:multiple-entity-row
name: Sun
toggle: false
show_state: false
state_color: false
entities:
- entity: sun.sun
name: Staus
toggle: false
- entity: sun.sun
name: Sunset
toggle: false
attribute: next_setting
format: time
- entity: sun.sun
name: Sunrise
toggle: false
attribute: next_rising
format: time
card_mod:
style: |
ha-card {
background-image: {% if is_state('sun.sun', 'above_horizon') %}
url("/local/images/sun.png")
{% else %}
url("/local/images/night.png")
{% endif %};
background-blend-mode: darken;
background-size: cover;
}
I can see and use the images I want if I just straight use the images as the background without any sort of filtering or if statement, it’s just that which I can’t seem to figure out.
if I use background image I get this:
and if I use background I get this:
Not sure how well that come across but the shading changes so it’s applying something