Dynamic background in Sections dashboard (based on weather entity)

Configuration Frontend
1

I’m trying to set a dynamic background in a Home Assistant Sections dashboard (type: sections) based on the state of weather.casa.

I use a template sensor that returns an image path like /local/weather/sunny.png, and it updates correctly when the weather changes.

What I tried:
-card-mod (ha-app-layout, hui-root, body, html)
-Theme variables via frontend
-Template sensor for image path
-CSS injection in Sections view

The sensor updates correctly, and images are accessible, but the Sections dashboard background does not update dynamically.

Is there any supported way to dynamically change the background of a Sections dashboard based on an entity state?

Or is this not supported in the current frontend architecture (only static backgrounds allowed)?

Or am I probably continually confused?

2

I know I've done some work with image entities, and I believe if you have an image entity that changes background, if you select that image entity via the media selector, then when that updates it will update the background dynamically as well.

You could try to template an image entity to rotate through some images.

3

Thank you so much karwost for your reply, I hadn't thought of that. I've been working on this for two days and I'm going to try to implement your idea right now.

Thanks again.

4

There's an example here: Automation to display different photos depending on weather conditions - #10 by tom_l

5

Just note a small difference is this is for background which doesn't have any option to select an entity directly.

However you get a similar effect by creating an image entity, then going the select media route to "Images" folder, and there will be an image in that folder associated with the image entity.

6

A few additional options available with UI eXtension:

  1. Allow for styling color and opacity with CSS vars, or apply further background styling, all with Frontend template support. See Styling section backgrounds.
  2. To apply a Background on any element, including sections, with template support you can use UIX Forge with Background spark. Backgrounds can be camera, image entity, video_url, image_url or background CSS.