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?

cloudy_image
clear_image

  - title: Lights2
    panel: true
    icon: mdi:lightbulb-on-outline
    cards:
      - type: picture-elements
        image: /local/living_room_background.png
        elements:
          # state_image & state_filter - toggle on click
          - type: image
            entity: switch.lamp_one
            tap_action:
              action: toggle
            image: /local/lamp_one_on.png
            state_image:
              "off": /local/lamp_one_off.png
            state_filter:
              "on"
            style:
              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

frontend:
  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
  extra_html_url_es5:
    - /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