Define background color in Picture Element

Configuration Frontend
1

Hi,

I have a Floorplan as a png picture with some transparent areas on it. Now, I want to set the background color behind the picture. This is what I tried without success. Can someone please tell me the mistake or show me a different approach. Thanks.

views:
  - title: Home
    path: home
    icon: mdi:home
    type: panel
    cards:
# Startseite
  # Hintergrundbild
      - type: picture-elements
        image: /local/floorplan/ipad_startseite_tag_transparent.png
        style: |
          ha-card {
            background: rgba(42, 46, 48, 1)
          }
        elements:
2

The picture elements style is for the element itself. To specifiy a CSS style like you have you would need to use card_mod.

A few alternative solutions to explore.

  1. Use an SVG of the desired colour as a background, and the place your main image as an image element with no interaction. My example below. You will need to play with the image element as far as top/left depening on the apect ratio so may take a little fiddling.
Card Code 
type: picture-elements
elements:
  - type: image
    style:
      top: 67%
      left: 50%
      width: 100%
      height: 100%
    image: https://www.w3.org/Graphics/PNG/alphatest.png
    tap_action:
      action: none
    hold_action:
      action: none
  - type: icon
    style:
      left: 50%
      top: 50%
    icon: mdi:alert-circle
image: >-
  data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%'
  height='100%' viewBox='0 0 1 1'%3E%3Cpath d='m0,0h1v1H0'
  fill='%23F00'/%3E%3C/svg%3E
  1. Create a theme with card-background-color set and select that theme for the card. This method does not need tweaking of sizes so is probably easier to use, but requires to setup a basic theme (see Theme Instructions)
Theme 
Card Background Red:
  card-background-color: "#f00"
Card Code 
type: picture-elements
elements:
  - type: icon
    style:
      left: 50%
      top: 50%
    icon: mdi:alert-circle
image: https://www.w3.org/Graphics/PNG/alphatest.png
theme: Card Background Red # <- Theme set here
3

Thanks for your answer. I actually wanted to set the background color based on the opacity of a outdoor light sensor. I didn’t mention that. I worked it out so now I use a white base screen with a black overlay. On top of both is my actual floorplan. Still, my problem is that I don’t get the black screens opacity shine based on the lux value of the light sensor. Can you help me here, too?

          - type: image
            tap_action: none        
            hold_action: none
            image: /local/floorplan/startseite_schwarz.png
            style:
              top: 50%
              left: 50%
              width: 100%
              opacity: >
                {% set lux = states('sensor.hue_bewegungsmelder_balkon_illuminance') | float(0) %}
                {% set max_opacity = 0.7 %}
                {% set max_lux = 10000 %}
                {% if lux >= max_lux %}
                  0
                {% elif lux <= 0 %}
                  {{ max_opacity }}
                {% else %}
                  {{ max_opacity * (1 - (lux / max_lux)) }}
                {% endif %}
4

The stock Home Assistant cards do not support templating. This is a card-mod only feature. Assuming your overlay is the first picture elements, use card-mod and add the following. If your overlay is not the first picture element, change the number in hui-image:nth-child(1).

card_mod:
  style:
    div: |
      hui-image:nth-child(1) {
        opacity:     
          {% set lux = states('sensor.hue_bewegungsmelder_balkon_illuminance') | float(0) %}
          {% set max_opacity = 0.7 %}
          {% set max_lux = 10000 %}
          {% if lux >= max_lux %}
            0
          {% elif lux <= 0 %}
            {{ max_opacity }}
          {% else %}
            {{ max_opacity * (1 - (lux / max_lux)) }}
          {% endif %}
      }