Can we use camera image as background for card?

Configuration
1

would it be possible to have a live image for background of a card:

      - type: glance
        style: |
          ha-card {
            background: camera.buienradar;
            background-size: cover;
            box-shadow: none;
          }

doesn’t work obviously, hence my question. Is this an incorrect syntax (probably) , or is it simply not supported (yet).

thanks for having a look

2

The only camera image I got is from robot vacuum:

type: entities
entities:
  - sun.sun
card_mod:
  style: |
    ha-card {
      background: url({{state_attr("camera.xiaomi_roborock_s50","entity_picture")}});
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: red;
      height: 300px !important;
    }

изображение

1 Like
3

A yes ofc, I should have tried the state of that entity, and not the entity itself. Will be back and report ;>

So, the answer might have been all along: yes we can!

Dec-23-2021 10-30-42

  - type: entities
    title: Temperature
    card_mod:
      style: |
        .card-header {
          background-color: var(--background-color-off);
          color: var(--text-color-off);
          padding-top: 0px;
          padding-bottom: 0px;
          margin: 0px 0px 16px 0px;
        }
        ha-card {
          background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
          background-repeat: no-repeat;
          background-size: 100%;
        }
    entities:
      - sensor.temp_current
      - sensor.buienradar_feel_temperature
      - type: custom:fold-entity-row
        head:
          type: section
          label: More info
        padding: 0
        entities:
          - sensor.mean_outdoor_temp
          - sensor.dark_sky_apparent_temperature
          - sensor.real_feel_temp
          - sensor.jagti_windchill
          - type: divider
          - binary_sensor.temp_falling
          - binary_sensor.temp_rising

ofc, need to fiddle about with the text colors to have it standput better against the camera, but this is very cool. thanks Ildar! Add it to you examples :wink:

btw I did change some of the background options, so it does still respect the fold when folded, and doesnt screw with the ratio’s.

1 Like
4

btw Ildar, now we got this working: would a mod of the view background be possible too? I searched inspector for the info on that item, but couldn’t find it.
Card-mod will probably only be available for cards…

Theme could be modded maybe through card-mod-themes? this allows acces to more than just cards: Card mod Themes · thomasloven/lovelace-card-mod Wiki · GitHub

yes! see 🔹 Card-mod - Super-charge your themes! - #924 by Mariusthvdb