card mod code affected by upgrade from 2.1.3 to 2.2.0 ?

[houser42]

Hello,

Just a note that the code you gave us for card mod to do transparency stopped working with 2.2.0. Gray screen for the touch area again. Going back to 2.1.3 fixed it. Below code is what I am currently using, perhaps it needs to change with 2.2.0? Many thanks.

card_mod:
  style: |
    :host {
      --ha-card-background: #00000000;
    }
    toucharea {
      background: #00000000;
      background-image: url("/hacsfiles/themes/jtm-bg/Apple_TV_logo_75.png");
      opacity: 0.9;
      background-repeat: no-repeat
    }

[Nerwyn]

It's working for me, but your yaml is missing a value after the decimal under opacity.

[houser42]

Thanks. The opacity is just for the overlaid image so that changed only that in 2.1.3 as that image has hard transparency in itself. Ah well. I can not get this to work with my card mod code. Will try some more when there is time. But I can not affect anything with card mod here with 2.2. Odd. Maybe I have som other conflict. Will trouble shoot..

[Nerwyn]

The opacity should have always been for the entire touchpad, including the image.

While I did modify the touchpad style logic, I'm not sure why the example doesn't work anymore as is. I got it to work again by add !important to the end of each property except opacity which still seems to work. I'll have to update the README examples.

toucharea {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/ab/Apple-logo.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: 0.1;
}

[houser42]

Thanks. This is not working here for some reason. Get the gray not transparent touch area and no logo. Might be typos or formatting. Will troubleshoot more carefully over the weekend. Many thanks.

[houser42]

Hello, I am unable to fix this. It is however no big deal as 2.1.3 works great and 2.2.0 has no obvious upgrades for my system that I can see. I guess I'll leave it for now and check again at the next upgrade and new docs for card mod. Many thanks.

[houser42]

Spent some more time and got it to work again with the latest version 2.1.1. Great thanks!

Question: Is it possible to set opacity for touch area and background image separately? I want 0,0 (invisible) for the touch area and some other number for the BG image.

I am pretty sure I was able to do this with 2.1.3 but that could have been a happy accident?

[Nerwyn]

There isn't a good way to set the opacity of the background image separately. You could set the background color using an rgba function or hex color to control the background color opacity separately from the image, and then set the overall opacity on top of that.

toucharea {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/ab/Apple-logo.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: 0.8; /* affects everything */
  background-color: rgba(172, 179, 182, 0.2) !important; /* affects just the background color */
}

[houser42]

Understood, this works! Many thanks!