I have been trying out various Lovelace cards to display the time & date with an image background. No doubt there are cards I have not tried that could work. My last attempt was the picture-elements card which gets me 99% there. The only tweak I have left is to reduce the top and bottom margins of the main card title. I have tried css padding and margins without any luck. Of course I may have applied them incorrectly in order to reach the intended element.
type: picture-elements
panel: true
image: /local/snowman.png
title: Today
elements:
- type: state-label
entity: sensor.time_date_2
style:
left: 50%
top: 70%
icon: mdi:calendar
aspect_ratio: 50%
card_mod:
style: |
:host
{ font-size: 20px; text-align: left; }
ha-card
{ background: lightblue; color: white; margin-top: 0px; }
What I desire is to reduce the height of the blue background surrounding the card title. A screenshot is attached of the resulting card.
