Image overlay for water tank level

Configuration Frontend
1

Hi I am looking for some help with my yaml. I want to create a visual representation of my water tank and show the level it is at using image overlays. I have created the card to my best knowlege but the image overlay is not corrisponding the actual tank level. The tank level is 79.8% but the image for 90-100% is showing still. I’m hoping it’s something simple. Here is my yaml

type: picture-elements
image: /local/community/TANK/water_tank_background2.png
elements:

  • type: image
    entity: sensor.garden_watertank_percent
    image: /local/community/TANK/water_tank_overlay_0_15.png
    style:
    top: 50%
    left: 50%
    width: 100%
    conditions:
    • condition: state
      entity: sensor.garden_watertank_percent
      below: 15
  • type: image
    entity: sensor.garden_watertank_percent
    image: /local/community/TANK/water_tank_overlay_15_30.png
    style:
    top: 50%
    left: 50%
    width: 100%
    conditions:
    • condition: state
      entity: sensor.garden_watertank_percent
      above: 15.1
      below: 30
  • type: image
    entity: sensor.garden_watertank_percent
    image: /local/community/TANK/water_tank_overlay_30_45.png
    style:
    top: 50%
    left: 50%
    width: 100%
    conditions:
    • condition: state
      entity: sensor.garden_watertank_percent
      above: 30.1
      below: 44
  • type: image
    entity: sensor.garden_watertank_percent
    image: /local/community/TANK/water_tank_overlay_45_60.png
    style:
    top: 50%
    left: 50%
    width: 100%
    conditions:
    • condition: state
      entity: sensor.garden_watertank_percent
      above: 45
      below: 59
  • type: image
    entity: sensor.garden_watertank_percent
    image: /local/community/TANK/water_tank_overlay_60_75.png
    style:
    top: 50%
    left: 50%
    width: 100%
    conditions:
    • condition: state
      entity: sensor.garden_watertank_percent
      above: 60
      below: 74
  • type: image
    entity: sensor.garden_watertank_percent
    image: /local/community/TANK/water_tank_overlay_75_90.png
    style:
    top: 50%
    left: 50%
    width: 100%
    conditions:
    • condition: state
      entity: sensor.garden_watertank_percent
      above: 75
      below: 89
  • type: image
    entity: sensor.garden_watertank_percent
    image: /local/community/TANK/water_tank_overlay_90_100.png
    style:
    top: 50%
    left: 50%
    width: 100%
    conditions:
    • condition: state
      entity: sensor.garden_watertank_percent
      above: 90
      below: 100.1
  • type: state-label
    entity: sensor.garden_watertank_percent
    prefix: "Water Tank Level: "
    style:
    top: 15%
    left: 43%
    transform: translate(-50%, -50%)
    font-size: 18px
    color: white
  • type: state-label
    entity: sensor.garden_watertank_liter
    prefix: "Remaining: "
    style:
    top: 65%
    left: 73%
    transform: rotate(270deg)
    font-size: 20px
    color: white
    water tank
    water tank489×515 80 KB
2

This may not qualify as simple, but it does qualify as beautiful, and mybe you can get some hints from how it was done: