Card_mod background images based on sun.sun

Configuration Frontend
1

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:
image

and if I use background I get this:
image

Not sure how well that come across but the shading changes so it’s applying something

1 Like
2

Ignore me, found a typo in my file path, correcting it fixed it, I will leave this here though for future if people want to do something similar as I couldn’t find anything else like this on the internet.

above_horizon
image
below_horizon
image

1 Like
3

Hello.
I am trying to buld a card for my Nintendo Switch, and I wanted to show, in the background, the image of the last game played, dimmed and in black and white. I almost did this, but I can’t mod the image without modding the text and icons also…
What I got:

type: custom:vertical-stack-in-card
cards:
  - type: entities
    entities:
      - entity: binary_sensor.ping_nintendo_switch_1
      - entity: sensor.nintendo_switch_1_last_user
        name: Utilizador
      - entity: sensor.nintendo_switch_1_last_used_app
        name: Aplicação
      - entity: switch.alarms_enabled_today
      - entity: switch.suspend_software_limit
      - entity: time.play_time_limit
      - entity: sensor.used_screen_time
    title: 'Switch #1'
    show_header_toggle: false
    state_color: true
    card_mod:
      style: |
        ha-card {
          background:
            {%- if states('binary_sensor.ping_nintendo_switch_1') == 'off' -%}
              url('{{ (state_attr('sensor.used_screen_time','daily')[0].playedApps|last).imageUri.medium }}') no-repeat center;
            {%- else -%}
              none;
            {%- endif -%}
          background-size: cover;
        };
  - type: custom:auto-entities
    show_empty: false
    filter:
      include:
        - entity_id: switch.*_whitelisted
      exclude:
        - state: unavailable
    sort:
      method: name
      numeric: true
      reverse: false
    card:
      type: entities
      card_mod:
        style: |
          ha-card {
            border: 0px !important;
            background: none !important;
          }

image
image478×538 85.9 KB

If I add:

...
          background-size: cover;
          filter: grayscale(1) opacity(0.4);
        };
...

i also dim take the color of the icons and opacity of everything:

image

How can I do this?
Thanks in advance!

4

Suggest to ask all card-mod related (since you definitely do want to use card-mod) questions in the dedicated thread.

1 Like