Can I use <div> to show a background image in a Markdown card?

[7wells]

Hello!

Can I use < div > or something else to show a background image in a Markdown card?

I have this dynamically built card, but I want icons to span the part that shows a game (understanding that the resolution of the available icon might be too small):

This is my code:

type: markdown
title: Steam Games
content: |
  {% if state_attr('sensor.steam_inventory', 'games') %}
    {% for game in state_attr('sensor.steam_inventory', 'games') %}
    ### ![Icon für {{ game.name }}](https://steamcdn-a.akamaihd.net/steamcommunity/public/images/apps/{{ game.appid }}/{{ game.img_icon_url }}.jpg) {{ game.name }}  
    **Play time:** {% set total_minutes = game.playtime_windows_forever %} {% set months = total_minutes // 43200 %} {% set days = (total_minutes % 43200) // 1440 %} {% set hours = ((total_minutes % 43200) % 1440) // 60 %} {% set minutes = (total_minutes % 43200) % 60 %} {% if total_minutes > 0 %} {% if months > 0 %}{{ months }} {{ 'month' if months == 1 else 'months' }}, {% endif %}{{ days }} {{ 'day' if days == 1 else 'days' }}, {{ hours }} hours, {{ minutes }} minutes{% else %}never played{% endif %}
    {% if not loop.last %}
    ---
    {% endif %}
    {% endfor %}
  {% else %}
    No data found. Check sesnor.
  {% endif %}

Sorry that I did not manage to properly format it. I use it as pasted here. As soon as I start using > or | the output of the value comes under the “Play time” in a new row - for all games - which I do not like. I hope you can understand my code nevertheless and help me to understand how/where to change it, so the source of the icon rather serves as the source for a background image.

Thanks for your help!

PS for users interested in how to use the required REST api sensor - here it is:

  - platform: rest
    name: "Steam Inventory"
    unique_id: "steam_inventory"
    resource: !secret steam_api_url
    scan_interval: 600
    value_template: "OK"
    json_attributes_path: "$.response"
    json_attributes:
      - games
    headers:
      User-Agent: HomeAssistant
    timeout: 10

The secret steam_api_url is stored in my secrets.yaml and looks as follows (my Steam ID redacted, of course):

steam_inventory_url: "https://steamcommunity.com/inventory/12345678901234567/753/6?l=english&count=5000"

BTW, if somebody knows, if and how the above sensor code could take the url not being secret but only the Steam ID from secrets.yaml inserted, please drop me a line, too. I did not manage it and therefore placed the whole url into my secrets.yaml file.

[ColtonYYZ]

Can you just use card_mod?

type: markdown
title: Steam Games
content: |
  {% if state_attr('sensor.steam_inventory', 'games') %}
    {% for game in state_attr('sensor.steam_inventory', 'games') %}
    ### ![Icon für {{ game.name }}](https://steamcdn-a.akamaihd.net/steamcommunity/public/images/apps/{{ game.appid }}/{{ game.img_icon_url }}.jpg) {{ game.name }}
    **Play time:** {% set total_minutes = game.playtime_windows_forever %} {% set months = total_minutes // 43200 %} {% set days = (total_minutes % 43200) // 1440 %} {% set hours = ((total_minutes % 43200) % 1440) // 60 %} {% set minutes = (total_minutes % 43200) % 60 %} {% if total_minutes > 0 %} {% if months > 0 %}{{ months }} {{ 'month' if months == 1 else 'months' }}, {% endif %}{{ days }} {{ 'day' if days == 1 else 'days' }}, {{ hours }} hours, {{ minutes }} minutes{% else %}never played{% endif %}
    {% if not loop.last %}
    ---
    {% endif %}
    {% endfor %}
  {% else %}
    No data found. Check sensor.
  {% endif %}
card_mod:
  style: |
    ha-card {
      background-image: url(https://icons.iconarchive.com/icons/titch-ix/game/256/Fallout-3-icon.png);
      background-size: 8em;  /* Or contain, or other CSS properties */
      background-position: right top;
      background-repeat: no-repeat;
      /* Optional:  Add padding if the text is too close to the edge */
      padding-left: 25%;
      /* Optional: Improve text readability with a background overlay */
      /* background-color: rgba(0, 0, 0, 0.5);  Semi-transparent black */
      color: yellow;  /* Change text color if needed */
    }

type: markdown
title: Steam Games
content: |
  {% if state_attr('sensor.steam_inventory', 'games') %}
    {% for game in state_attr('sensor.steam_inventory', 'games') %}
    ### ![Icon für {{ game.name }}](https://steamcdn-a.akamaihd.net/steamcommunity/public/images/apps/{{ game.appid }}/{{ game.img_icon_url }}.jpg) {{ game.name }}
    **Play time:** {% set total_minutes = game.playtime_windows_forever %} {% set months = total_minutes // 43200 %} {% set days = (total_minutes % 43200) // 1440 %} {% set hours = ((total_minutes % 43200) % 1440) // 60 %} {% set minutes = (total_minutes % 43200) % 60 %} {% if total_minutes > 0 %} {% if months > 0 %}{{ months }} {{ 'month' if months == 1 else 'months' }}, {% endif %}{{ days }} {{ 'day' if days == 1 else 'days' }}, {{ hours }} hours, {{ minutes }} minutes{% else %}never played{% endif %}
    {% if not loop.last %}
    ---
    {% endif %}
    {% endfor %}
  {% else %}
    No data found. Check sensor.
  {% endif %}
card_mod:
  style: |
    ha-card {
      background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShD-XhQQ_Zd7hsFG3_X3Ycev8N8EP-g2XplQ&s");
      background-size: contain;  /* Or contain, or other CSS properties */
      background-position: center; 
      background-repeat: no-repeat;
      /* Optional:  Add padding if the text is too close to the edge */
      padding-left: 5em;
      padding-top: 55%;
      /* Optional: Improve text readability with a background overlay */
      /* background-color: rgba(0, 0, 0, 0.5);  Semi-transparent black */
      color: white;  /* Change text color if needed */
    }