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!
