I'm trying to show two different background images depending on a sensor

Configuration Frontend
1

I’ve tried to make a card that shows date and time, and then depending on a sensor ‘on’ it should change the background image, but I don’t see it change depending on the sensor.

elements:
  - entity: sensor.time
    hold_action: none
    style:
      color: white
      font-size: 4.5vw
      left: 60%
      top: 35%
    tap_action: none
    type: state-label
  - entity: sensor.datedk
    hold_action: none
    style:
      color: white
      font-size: 1.3vw
      left: 60%
      top: 78%
    tap_action: none
    type: state-label
  - type: image
    tap_action: none
    action: none
    entity: calendar.testing
    state_image:
      'on': /local/images/clock_background.png
hold_action: none
image: /local/images/empty_clock_background.png
tap_action: none
type: picture-elements

So the standard image is a transparent png image, and the idea was that I wanted to show another image on top of it (also a png image with a transparent background), but I don’t see it change.

Any ideas?

2

In the image section you might want to loose the tap-action: none and action: none statement
or indent the action: none statement by two spaces.
I would say if you have no tap-action don’t even mention it.

3

Ok, but that doesn’t affect the behaviour, and they are tapable now (which I don’t want).
The two images I have are these:
clock_background
empty_clock_background

4

ok, was not sure if the spaces would affect the latter stuff.
what happens if you put both an on and off state image in there in addition to the general one?
Is the state value really on and off or maybe some other text, refer tot the developer tools- states for the values of the sensor.

5

Yes, it really is on/off in dev tools. And it shouldn’t be necessary as I understand it to have both on and off, but it unfortunately didn’t change anything if I added both states.
Currently I’ve just set it up to react on a light.

6

I figured it out, it needs style for placement of the element.

So the entire card looks like this:

elements:
  - entity: sensor.time
    tap_action: none
    hold_action: none
    style:
      color: white
      font-size: 4.5vw
      left: 60%
      top: 35%
    type: state-label
  - entity: sensor.datedk
    tap_action: none
    hold_action: none
    style:
      color: white
      font-size: 1.3vw
      left: 60%
      top: 78%
    type: state-label
  - type: image
    tap_action: none
    hold_action: none
    entity: light.wallpaper_lamp
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': /local/images/clock_background.png
      'off': /local/images/empty_clock_background.png
image: /local/images/empty_clock_background.png
type: picture-elements