Overlay name with entity_picture in custom:button-card

[Mariusthvdb (Marius)]

trying to set a z-index on the entity_picture in this button but I cant find the correct css property, or syntax…

type: custom:button-card
template:
  - button_summary
entity: sensor.u_s_air_pollution_level
name: Aqi
size: 70%
show_last_changed: true
show_state: true
state_display: >
  [[[ return entity.state.replace('_',' '); ]]]
show_entity_picture: true
show_name: trye
# variables:
#   text_color: >
#     [[[ var mapper = {'good':'darkgreen','moderate':'gold',
#                       'unhealthy_sensitive':'orange',
#                       'unhealthy':'red','very_unhealthy':'purple','hazardous':'maroon'};
#         return mapper[entity.state] || 'grey'; ]]]

entity_picture: >
    [[[ var mapper = {'good':'ic-face-1','moderate':'ic-face-2',
                      'unhealthy_sensitive':'ic-face-3',
                      'unhealthy':'ic-face-4','very_unhealthy':'ic-face-5'};
        var picture = mapper[entity.state] || 'ic-face-6';
        var path = '/local/weather/aqi_icons/'
        var ext = '.svg'
        return path + picture + ext; ]]]
#show_state: false
hold_action:
  action: navigate
  navigation_path: /ui-overzicht/weer

styles:
# is the correct?
  img_cell:
    - z-index: 10
  card:

    - color: >
        [[[ return 'var(--primary-color)'; ]]]
    - background-color: >
        [[[ var aqi = states['sensor.u_s_air_quality_index'].state;
            if (aqi <= 50) return '#A8E05F';
            if (aqi <= 100) return '#FDD64B';
            if (aqi <= 150) return '#FF9B57';
            if (aqi <= 200) return '#FE6A69';
            if (aqi <= 300) return '#A97ABC';
            return '#A87383'; ]]]

I can change the size, but would rather even have the picture a bit larger. So, if at all possible, I would love to be able to make it push over the name, which wint ever change

would appreciate if someone could have a look please, thx

[Mariusthvdb (Marius)]

changed it to background-image had to not_show the icon emoticons:

type: custom:button-card
template:
  - button_summary
entity: sensor.u_s_air_pollution_level
name: Aqi
#size: 70%
show_last_changed: true
show_state: true
show_icon: false
state_display: >
  [[[ return entity.state.replace('_',' '); ]]]
# show_entity_picture: true
show_name: trye
# variables:
#   text_color: >
#     [[[ var mapper = {'good':'darkgreen','moderate':'gold',
#                       'unhealthy_sensitive':'orange',
#                       'unhealthy':'red','very_unhealthy':'purple','hazardous':'maroon'};
#         return mapper[entity.state] || 'grey'; ]]]


# entity_picture: >
#     [[[ var mapper = {'good':'ic-face-1','moderate':'ic-face-2',
#                       'unhealthy_sensitive':'ic-face-3',
#                       'unhealthy':'ic-face-4','very_unhealthy':'ic-face-5'};
#         var picture = mapper[entity.state] || 'ic-face-6';
#         var path = '/local/weather/aqi_icons/'
#         var ext = '.svg'
#         return path + picture + ext; ]]]
#show_state: false
hold_action:
  action: navigate
  navigation_path: /ui-overzicht/weer

styles:
  card:
#    - font-size: 10px
    - color: >
        [[[ return 'var(--primary-color)'; ]]]
    - background-color: >
        [[[ var aqi = states['sensor.u_s_air_quality_index'].state;
            if (aqi <= 50) return '#A8E05F';
            if (aqi <= 100) return '#FDD64B';
            if (aqi <= 150) return '#FF9B57';
            if (aqi <= 200) return '#FE6A69';
            if (aqi <= 300) return '#A97ABC';
            return '#A87383'; ]]]
    - background-image: >
        [[[ var mapper = {'good':'ic-face-1','moderate':'ic-face-2',
                          'unhealthy_sensitive':'ic-face-3',
                          'unhealthy':'ic-face-4','very_unhealthy':'ic-face-5'};
            var picture = mapper[entity.state] || 'ic-face-6';
            var path = '/local/weather/aqi_icons/'
            var ext = '.svg'
            return 'url(' + path + picture + ext + ')'; ]]]
    - background-size: 80% # or use `cover` here
    - background-repeat: no-repeat

  custom_fields:
    notification:
      - border-color: var(--primary-color)

custom_fields:
  notification: >
      [[[ return states['sensor.u_s_air_quality_index'].state; ]]]

background-size: 80%

or even the

background-size: cover (for illustrating purposes)

might have to fiddle with the card color there