Dynamic daily background image in picture-elements — not filling card fully

Hi all,

I’m trying to create a Lovelace card that shows a different background image each day of the month — /local/fotos/1.jpeg on the 1st, /2.jpeg on the 2nd, etc. I want the image to act as a full-screen background (like a tile-wide daily wallpaper), with the time and date displayed on top.

I made a template sensor that returns the correct image path:

template:
  - sensor:
      - name: "day_image"
        state: >
          {% set day = now().day %}
          /local/fotos/{{ day }}.jpeg

I’m using this in a picture-elements card, with a dummy background (/local/transparent.png) and the actual image added as an image element with state_image.

The image does show now, and it changes daily, but it does not cover the full card height.

Relevant code:

type: picture-elements
image: /local/transparent.png
elements:
  - type: image
    entity: sensor.day_image
    state_image:
      '/local/fotos/1.jpeg': /local/fotos/1.jpeg
      ...
      '/local/fotos/31.jpeg': /local/fotos/31.jpeg
    style:
      top: 50%
      left: 50%
      width: 100%
      height: 100%
      transform: translate(-50%, -50%)
      object-fit: cover
  ...
card_mod:
  style: |
    ha-card {
      height: 100%;
      min-height: 550px;
      max-height: 100vh;
      overflow: hidden;
      border-radius: 12px;
      position: relative;
    }
    ha-card::before {
      content: '';
      display: block;
      padding-top: 100%;  /* tried 75%, 56.25% too */
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover;
    }

For context: this card sits in column 1 of a 3-column vertical layout. It’s the topmost card, meant to act like a “daily mood” background. Below it in the same column is a compact weather card. The issue is that the image doesn’t stretch to fill the full space of this tile — even though the card itself visually occupies enough vertical space.

I tried config-template-card but it wasn’t showing any image. Just a broken image icon.

Please help!

1 post - 1 participant

Read full topic