How do I add a background to easy layout card, and not the sub cards

Configuration Frontend
1

I want to add an image to the entire card, but it seems like I can’t get card_mod to work with the main box. I have an easy layout card to use the grid and while, each entity has a card mod css attached, I want the layout card to have a background image.

this is my code.

type: custom:easy-layout-card
layout_type: custom:grid-layout
cards:
  - type: custom:mushroom-template-card
    primary: PC Uptime
    secondary: |
      {{ states(config.entity) }}
    entity: sensor.nerdbox_pc_uptime
    view_layout:
      grid-area: header
    card_mod:
      style: |
        ha-card {

          --card-primary-font-size: 1.5rem;
          --primary-text-color: white;
          --secondary-text-color: green;
          border: 1px;
          box-shadow: none;
          background: rgba(0,0,0,0);
        }
  - type: custom:mushroom-template-card
    icon: mdi:sleep
    entity: input_boolean.pc_sleep_disabler
    view_layout:
      grid-area: main1-1
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-size:50px;
          }
        .: |
          ha-card {
            background: rgba(0,0,0,0);
          }
  - type: custom:mushroom-template-card
    icon: mdi:wrench-clock
    entity: input_boolean.maintenance_mode_toggle
    view_layout:
      grid-area: main2-1
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-size:50px;
          }
        .: |
          ha-card {
            background: rgba(0,0,0,0);
          }
  - type: custom:mushroom-template-card
    icon: mdi:lan-connect
    entity: input_boolean.wol_disabler
    view_layout:
      grid-area: main3-1
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-size:50px;
          }
        .: |
          ha-card {
            background: rgba(0,0,0,0);
          }
  - type: custom:mushroom-template-card
    icon: mdi:monitor-lock
    entity: input_boolean.resolution_check_disabler
    view_layout:
      grid-area: main4-1
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-size:50px;
          }
        .: |
          ha-card {
            background: rgba(0,0,0,0);
          }
  - type: custom:mushroom-template-card
    icon: mdi:power
    entity: switch.nerdbox
    view_layout:
      grid-area: sensor5
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-size:65px;
          }
        .: |
          ha-card {
            background: rgba(0,0,0,0);
          }
layout:
  grid-template-columns: min-content 1fr min-content
  grid-template-rows: auto
  grid-template-areas: |
    "header header header"
    "main1-1 main1-2 sensor1"
    "main2-1 main2-2 sensor2"
    "main3-1 main3-2 sensor3"
    "main4-1 main4-2 sensor4"
    "main5-1 main5-2 sensor5"

So basically what I want to do is attach a background to the card that defines the grid layout, and not the sub entities. Is that possible?

1 Like