Lovelace: Issue with Picture Elements

Configuration Frontend
1

Hello,

I apologize if this is a stupid question… I’m probably missing something obvious. I’m trying to use the picture-elements type to show a picture with icons and labels overlayed on the image. I was going to use the picture-glance and it was fine, except that I wanted the temperature to be shown as a label instead of an icon (so the temperature is actually visible at a glance). In any event when I use this code I see the photo of my living room, but no images or labels appear on top. How can I correct this?

Thank you.

views:
    # View tab title.
  - title: Downstairs
    icon: mdi:lamp
    cards:
      - type: picture-elements
        title: Living Room
        image: /local/living-room.jpg
        elements: 
          - type: state-label
            entity: sensor.living_room_temperature
            style:
              top: 50%
              left: 50%
          - type: state-icon
            entity: binary_sensor.living_room__office
            style:
              top: 0%
              left: 0%
2

Which version of HA are you running?

3

0.74.0, I upgraded before I started working on customizing today.

4

I can’t see why it isn’t showing up your config looks good. Here is my working config

- type: picture-elements
  image: /local/House.jpg
  elements:
    - type: state-label
      entity: sensor.broadlink_sensor_temperature
      style:
        top: 16%
        left: 52%
5

Is it just a typo?
There’s a double_ between room and office in “entity: binary_sensor.living_room__office”

6

Thanks for the config and suggestions. It’s not a typo (that sensor is named funny and I haven’t fixed it). It doesn’t seem to matter what I use, I cannot see it. I’m using Chrome on a Windows PC.

7

If I reference a bad image URL:

image

8

It looks like I’m to blame here. As luck would have it the label was appearing exactly in the only black area on the photo. Once I moved it up I could see it. The other sensor had an invalid icon specified. Sorry for the troubles there.

So, that being said, is there a way to set a background color behind a label? I’m basically trying to replicate how the picture glance looks with the bar at the bottom and going to put my icons along there, hopefully.