State_badge in picture-elements "always on top"


I made a floor plan using picture-elements card.
I’m very happy how it turned out but I’m facing an issue with badges.

My (simplified) configuration is this:

image: /local/Plans/first_floor.png
type: picture-elements
  - entity: sensor.vaillant_current
      color: transparent
      font-size: 8px
      left: 47%
      top: 15%
      '--label-badge-background-color': white
      '--label-badge-text-color': black
    title: Thermostat
    type: state-badge
  - entity: light.kids_room
      action: more-info
    image: /local/ceiling-light-on.png
      'off': /local/Plans/kids - off.png
      'on': /local/Plans/kids - on.png
      unavailable: /local/Plans/kids - grey.png
      transform: translate(-50%,-50%) scale(0.4238, 0.4238)
      left: 49.41%
      top: 19.71%
      action: toggle
    title: Kids room
    type: image

But, as I’m using a state_image to show the room with/without light, it is covering the state_badge as soon as the image is switching.

Is there a way to set the state_badge like “always on top” in a way?
Maybe using card-mod?

The Picture Elements card is like a layer cake. Elements at the top of your configuration are drawn first and each subsequent element is layered on top.

Try changing the order of your elements.

1 Like

Can’t believe it was that easy, thank you!