First card on first dashboard won't stay transparent (card_mod)

Configuration Frontend
1

I’m using the default masonry layout. First card is weather forecast card, but I’ve tried multiple types of cards and configurations. In any other position, on any other dashboard, transparency works fine. When applied to the first card on the first dashboard, transparency works, but card loses transparency when reloading the web interface, or closing and relaunching the app.

This is the code I’m using for transparency with card_mod

card_mod:
  style: |
    ha-card {
       background: transparent;
       border-style: none;
       primary-text-color: white;
       secondary-text-color: teal;
       border: 0px;
       box-shadow: none;
       background: rgba(50,50,50,0.0);
       border: none;
    }
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
show_current: true
show_forecast: true

Edit: corrected css commenting format.

I tried Edge, Chrome, and Firefox. Issue persists across all browsers.
I’ve noticed after more testing that at least viewing through the web the transparency fixes itself after 20 or 30 seconds. The only thing that corrects the effect with the companion app is to edit the card and save it again. But on next app launch its no longer transparent. I also noticed while testing that my backgrounds sometimes do not load for 20-30 seconds either.

Using proxmox running VM of HA 2024.11.3 (issue was present on 2024.11.2 as well)
I have 4 cores of an I9 9900k and 10GB of ram allocated to HA

Any help is much appreciated!

2

Cannot confirm - always transparent after F5:
image

type: weather-forecast
entity: weather.home_met
forecast_type: daily
show_current: true
show_forecast: true
card_mod:
  style: |
    ha-card {
      background: transparent;
      border: none;
    }

Chrome.

Strongly suggest you not to use “–” for “commenting” CSS properties.
It causes errors and MAY cause undesired effect if a real “–xxxx” variable does exist.

3

Thanks for checking! I think I fixed the commenting you were referring to? I’m a newbie and learning. Know enough to be dangerous.

4

You just removed these dashes - and now it causes:
– 2 same property with diff values
– wrong value for “border” property

And do not suggest you to edit your posts after giving you remarks - you prevent other users to learn on errors.

Also, this is a proper place to ask any card-mod related questions.

5

First make sure that it is not your browser cache that plays in here.
Delete the cache completely to be sure!

Next try to use the !important option in CSS.

      background: transparent !important;