Picture-elements Background image is very cloudy

Ok, I’m feeling pretty stupid because I cannot figure out what’s going on. My background image is very cloudy while viewing it in home assistant. If I right click the image to view in a new Chrome tab, it isn’t cloudy.

Below are the two screenshot images along with the sparse lovelace-ui code for that view. Even if I delete the two on/off state images, the background image is still cloudy. If I load living_room_background.png in irfanview, mspaint, etc… it is not cloudy. Just in Home Assistant. I’ve deleted the browser cache and viewed on other computers and its cloudy there too. What is going on?


  - title: Lights2
    panel: true
    icon: mdi:lightbulb-on-outline
      - type: picture-elements
        image: /local/living_room_background.png
          # state_image & state_filter - toggle on click
          - type: image
            entity: switch.lamp_one
              action: toggle
            image: /local/lamp_one_on.png
              "off": /local/lamp_one_off.png
              top: 78%
              left: 82%
              width: 35%

Maybe there’s another html element on top of it? Right click and inspect element to see if that’s the case.

1 Like

Thank you for that advice. That led me to the solution. I had experimented briefly with home-assistant-custom-ui. I had deleted the files, but had forgotten to remove this from configuration.yaml

    - /local/custom_ui/state-card-custom-ui.html
    - /local/custom_ui/state-card-custom-ui-es5.html

After clicking inspect the element, per your suggestion, I saw an error referencing the html pages above. Removing that frontend: reference, fixed my issue. Thanks again.

1 Like