Styling elements in Picture elements card: a small tutorial

So if I’m following you, you made the buttons and background at the right sizes they shouldn’t need any adjustments but they do? I can’t say for sure but my guess is that it puts regular icons in at a normal size and then other pictures at the size of the background. Here you can see my floor plan with the pictures adjusted to the size I want with the height/width settings:

      - type: image
        entity: binary_sensor.living_room_motion_detected
        state_image:
          "on": /local/motion_red.png
          "off": /local/motion_grey.png
          "unknown": /local/red_x.png
          "unavailable": /local/red_x.png
        style:
          top: 60%
          left: 88%
          width: 5%

image

If I add in a picture with no scaling, it makes it full size:

      - type: image
        entity: binary_sensor.living_room_motion_detected
        state_image:
          "on": /local/motion_red.png
          "off": /local/motion_grey.png
          "unknown": /local/red_x.png
          "unavailable": /local/red_x.png
        style:
          top: 50%
          left: 50%
#          width: 5%

image

1 Like