Shading a picture element card

Hi,

In lovelace, I’m using picture elements with various state icons and text overlaid across the bottom. I see this in lots of example dashboards, but one thing I can’t seem to figure out is how to do the shading – basically say I want the bottom 1/4 of the picture to have a dark shaded overlay so the text / icons show up more clearly.

I undersatnd how to put a background on an individual element, but then I just get weird boxes around my various elements rather than a single shaded area on the bottom.

IE this is what I’m currently doing :


             - type: picture-elements
                image: /local/lovelace/bob.jpg
                elements:
                  - type: state-label
                    entity: person.bob
                    prefix: 'Bob -- '
                    style: {color: white, left: 30%, top: 90%, background-color: "rgba(0, 0, 0, 0.5)"}
                  - type: state-icon
                    entity: sensor.bobpixel5_battery_level
                    tap_action: more_info
                    style:  {color: white, left: 73%, top: 90%, background-color: "rgba(0, 0, 0, 0.5)"}
                  - type: state-label
                    entity: sensor.bobpixel5_battery_level
                    style: {color: white, left: 87%, top: 91%, background-color: "rgba(0, 0, 0, 0.5)"}

So each of those elements on the bottom of the picture is visible, but they each have an individual box around them, instead of the bottom part of the photo just being darker.

I know… like, the basics of CSS but just enough to get myself in trouble, not to get myself out of it.
Thanks!

Based on reading, I think the most reasonable thing is to just pre-shade the area in Photoshop or the like. Glad I wasn’t missing something :slight_smile: