#People Cards

1 messages · Page 1 of 1 (latest)

pallid storm
#

Im trying to add a background image to a card to show data for people in the home. I cant seem to get an image to load onto the card using background-image:url("local/calecard.png")

frail wolf
#

What card are you trying to use? Post your code to show what you've tried.

pallid storm
#

type: custom:swipe-card
parameters:
effect: coverflow
cards:

  • type: custom:button-card
    entity: person.cale_spencer
    show_name: false
    show_icon: false
    styles:
    card:
    - padding: 4%
    - background-image: url("local/calecard.png")
    - background-size: 90%
    - background-repeat: no-repeat
    - background-position: top center
    - "--keep-background": "true"
    custom_fields: null
pallid storm
#

that is a link to what i am trying to accomplish

frail wolf
#

I'm familiar with Aaron's card. I still have it as an example to refer to in my "lab" dashboard. I forget the exact syntax needed for that field. I'll have to double-check when i get home from work.
Can you confirm the image is located in your /config/www folder?
The path in the code may also need a leading / but i cannot remember if that's required.

pallid storm
#

so my www folder seems to be contained in the homeassistant folder

frail wolf
#

That's probably correct too. I forgot when you look at the folder from with HA, it sits in homeassistant. Via SMB in Windows it is in the config folder.
I'll play with the syntax this evening when I get home from work. It is probably a quotation mark or something simple.

pallid storm
#

lol probably

frail wolf
#

Try adding the leading slash to the path. This worked for me: - background-image: url("/local/IDDQD - High Res.png") but - background-image: url("local/IDDQD - High Res.png") did not.

#

This was a card that I used for experimentation and learned how to be able to use variables with the custom:button- card (which later becomes useful when turning the code into a template.)

#

Here's my variables section: ```yaml
variables:
person_entity: person.derek
battery_level: sensor.s22_ultra_battery_level
steps: sensor.watch5_daily_steps
ringer_mode: sensor.s22_ultra_ringer_mode
bluetooth_state: binary_sensor.s22_ultra_bluetooth_state
media_player: media_player.bedroom

`entity: "[[[ return variables.person_entity ]]]"` and 
`if (states[variables.battery_level].state <= 30) return "#e45649";`