Remove background of Card

[true girder]

Good morning, I'm trying to figure out how to remove the background of the first card after the Dashboard, and can't seem to find a way?
That rectangle seems off there, the code of that part is:

primary: |-
  {% set time = now().hour %}
  {% if (time >= 20) %}
    Boa noite, {{user}}
  {% elif (time >= 12) %}
    Boa tarde, {{user}}
  {% elif (time >= 5) %}
    Bom dia, {{user}}
  {% else %}
    Hello, {{user}}
  {% endif %}
    
secondary: '{{ states(''input_text.jarvis_chat'') }}'
icon: mdi:robot-excited-outline
icon_color: ''
fill_container: true
picture: https://s9.gifyu.com/images/LE57.gif
multiline_secondary: true
layout: vertical
entity: input_text.jarvis_chat
tap_action:
  action: more-info

[cloud zenith]

Not sure if you can using mushroom, you might need to use a theme to do it and set the opacity of the background to 100%

[unreal cape]

If you don't have it already, then install HACS: Card-mod

then:

type: custom:mushroom-template-card
primary: |2-
    {% set time = now().hour %}
    {% if (time >= 20) %}
      Boa noite, {{user}}
    {% elif (time >= 12) %}
      Boa tarde, {{user}}
    {% elif (time >= 5) %}
      Bom dia, {{user}}
    {% else %}
      Hello, {{user}}
    {% endif %}
secondary: '{{ states(''input_text.jarvis_chat'') }}'
icon: mdi:robot-excited-outline
fill_container: true
picture: https://s9.gifyu.com/images/LE57.gif
multiline_secondary: true
entity: input_text.jarvis_chat
tap_action:
  action: more-info
layout: vertical
card_mod:
  style: |
    ha-card {
      box-shadow: none;
      background: rgba(0,0,0,0);
      text-align: center;
    }

In the CSS background, the RGBA equates to: Red, Green, Blue, Alpha

The R,G,B are each 0-255

The Alpha is 0-1
0 being 100% transparent, 1 being 100% opaque

[true girder]

@unreal capeYou're absolutely fantastic! Thank you so much, it worked!

You might as well be able to help me out of something else that's probably very easy to fix but I can't seem to?

This card is supposed to show the state of a light entity if it's on or off.
Meanwhile I've been trying to fix it to show the state of multiple lights instead of just the entity one, so on the icon_color: I did some changes, that don't seem to work? What am I doing wrong here? 😦 https://dpaste.org/YO5PJ. Talking about the {% if states('light.candeeiro_quarto') == 'on' %}... part.

It works if I set the entity: light.lounge_light only tho.

[upbeat vine]

Congratulations @true girder! You just advanced to level 4!

[true girder]

@cloud zenith you also might be able to help I think. Sorry to bother you tho.

pulls the state of light.candeeiro_quarto but if I do with light.bedside_lamps the new one doesn't pull the proper state like the one at the bottom.
I stole the code from the one at the bottom to the one at the top and can't seem to fix this <.<

FIXED

[unreal cape]

regarding your icon colour ... try this as it's a bit neater (logical OR):

        {% if (is_state('light.candeeiro_quarto', 'on')
        or is_state('light.candeeiro_quarto', 'on')
        or is_state('fan.bedroom', 'on')
        or is_state('media_player.tv_bedroom', 'on')) %}
        yellow
        {% else %}
        gray
        {% endif %}