Background

[Zipp0KMS]

Hey. Thank you for your work!
Is it possible to add a background to the entire card like custom:minimalistic-area-card?

[marcokreeft87]

Yes you can by setting this on the main entity:

styles: 
  background-image: url('https://images.pexels.com/photos/235986/pexels-photo-235986.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')

[Zipp0KMS]

It works, thanks :)
But I'm a noob in css. How I can render the full image at the size of the card? I have only a small part of the image in the card, now.

[Zipp0KMS]

I didn't get it... if I use "height" under "styles", it change the entire card height, not the image.

[marcokreeft87]

I think your images is too small than but you can find all you need here : https://www.w3schools.com/cssref/pr_background-image.asp

[FlexxFR]

How to get the additional card transparent/semi-transparent to see the background picture (as example pic above)
I get:

[marcokreeft87]

You have to configure that card

[FlexxFR]

all right, I figured it out.

Added this to the 2nd card

          style:
            .: |
              ha-card {
                background-color: transparent !important;
                box-shadow: none !important;
              }

However, every time the main card is updated (for example the motion icon), the subcard flashes white for a split second before turning transparent again. Is this something that can be fixed?

[marcokreeft87]

Not sure. Will try and reproduce it. Can you send me your yaml?

[FlexxFR]

This is was I use for testing

type: custom:room-card
title: Zolder
entity: light.attic
icon: mdi:home-floor-a
show_icon: true
styles:
  background-image: url('https://demo.home-assistant.io/stub_config/kitchen.png')
tap_action:
  action: toggle
info_entities:
  - entity: group.motion_zolder_studeer1
    show_icon: true
    state_color: true
    tap_action:
      action: toggle
  - entity: group.motion_zolder_studeer2
    show_icon: true
    tap_action:
      action: toggle
entities:
  - entity: group.motion_zolder_studeer3
    show_icon: true
    tap_action:
      action: toggle
  - entity: light.snfesp_slaapkamer_light
    name: Plafond
    show_icon: true
    show_name: true
    tap_action:
      action: toggle
  - entity: sensor.temperatuur_slaapkamer_avg
    name: ddd
    icon: mdi:temperature-celsius
    show_icon: true
    show_name: true
    tap_action:
      action: toggle
    styles:
      entity:
        - font-size: 20px
        - color: white
cards:
  - type: entity
    entity: sensor.temperatuur_slaapkamer_avg
    style:
      .: |
        ha-card {
          background-color: transparent !important;
          box-shadow: none !important;
          border-style: none;
        }

[marcokreeft87]

@FlexxFR I have tried it out and it seems to be because of that card-mod applies the modding after the card has been loaded ( seems logical ) but because its a card inside a card this take a bit longer

[gipetkov]

Hi, I have the problem with background -only show in icon area :

type: custom:room-card
title: Първи етаж
icon: mdi:home-floor-a
show_icon: true
styles:
background-image: url('/local/11.jpg')
entity: switch.shelly_shsw_l_98cdac1e805d
rows:

• entities:

[elupus]

Yup, have same issue

[marcokreeft87]

Try card_styles