Collection image as dashboard background

Configuration Frontend
1

I am attempting to use the new Collection Image integration (Collection image - Home Assistant) to have an image background on my dashboards that will shuffle over time. I have successfully created the collection image image.landscape_collection and was able to add this to a Picture tile card:

    cards:
      - type: heading
        heading: New section
      - type: picture
        image_entity: image.landscape_collection

When I try to add it to a brand new dashboard through the UI, it adds the following yaml:

background:
  opacity: 33
  alignment: center
  size: contain
  repeat: no-repeat
  attachment: fixed
  image:
    media_content_id: media-source://image/image.landscape_collection
    media_content_type: image/jpeg
    metadata:
      title: landscape collection
      thumbnail: /api/image_proxy/image.landscape_collection
      media_class: video
      children_media_class: null
      navigateIds:
        - {}
        - media_content_type: app
          media_content_id: media-source://image

However, no image is displayed. Is there something I’m missing here? It certainly looks like the yaml for the dashboard is far more complicated than that of the card.

2

As far as I can tell that should work. I am trying something similar and it works for me as a dashboard background.

Some possible things to try:

  • reload the page
  • check browser console for any errors?
  • does it work if you just select one of the source images directly, instead of the image collection?
  • safe mode
3

Following up here: View/dashboard background does not render image entities: `media-source://image/...` resolves to an MJPEG stream, which CSS `background-image` cannot display · Issue #54016 · home-assistant/frontend · GitHub