Stupid me accidentally put the card on the first view. Redeploying homeassistant now doesn’t solve the problem that all pictures have changed. The current phenomenon is that after I change the picture of the first card, the pictures of all the other cards behind have changed to the picture placed on the first card. What should I do now?
Welcome to the forum! 
First, take a deep breath, it’s nothing life threatening!
Please post the code, as your description is not very clear (at least not for me). Did you do it via UI or YAML? If the first, use a copy of the code shown in the code editor window, or even better, use the raw confige editor and post the complete code.
1 Like
Thank you for your reply. Since there are many codes, I have intercepted the beginning part. The following is my code.
The last horizontal-stack is the card that I accidentally moved to the very beginning. After a problem occurred, I read the official document and there was a hint
title: Home
resources:
- url: /www/community/xiaomi/xiaomi-smartfan.js
type: js
views:
- path: default_view
title: Home
theme: ios-dark-mode-light-blue-alternative
badges: []
cards:
- show_state: true
show_name: true
camera_view: auto
type: picture-entity
entity: camera.jian_kong
- type: entities
entities:
- entity: sensor.timestamp
name: uptime
- entity: sensor.lock_action
name: status
state_color: true
title: homeinfo
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: media_player.tv_control
name: TV
hold_action:
action: none
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.e1ed_switch_status
name: camera
show_state: false
hold_action:
action: none
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.phone_battery_level
show_name: true
size: 13px
aspect_ratio: 1/1
show_state: true
name: Lee
extra_styles: |
ha-card {
background-image: url('/local/image/mk.png');
}
styles:
card:
- border-radius: 10%
- padding: 1%
- font-size: 10px
- background-size: cover
- font-weight: bold
- color: ivory
- background-position: center
- background-repeat: no-repeat
- background-size: 50% auto
- margin: none
grid:
- grid-template-areas: '"i i" "s s" "n n" "dts dts" "gx gx'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr 1fr 1fr 1fr
img_cell:
- justify-self: end
- width: 52%
- margin-top: 8%
- font-size: 10px
state:
- justify-self: end
- width: 22%
- margin-top: '-32%'
- font-size: 10px
name:
- justify-self: start
- width: 100%
- margin-top: 40%
dts:
- justify-content: start
- align-items: start
gx:
- justify-content: start
- align-items: start
icon:
- color: |
[[[
if (states["sensor.phone_battery_level"].state >= 71) return '#46FF33';
if (states["sensor.phone_battery_level"].state >= 30 && states["sensor.phone_battery_level"].state < 70) return '#F09D38';
else return '#F65A5A';
]]]
custom_fields:
gx:
- align-self: start
- justify-self: start
- width: 50%
- margin-top: '-90%'
dts:
- align-self: start
- justify-self: end
- width: 108%
- margin-top: '-5%'
- font-size: 10px
custom_fields:
gx: |
[[[
var lastChanged = new Date(states["device_tracker.phone"].last_changed);
var timeDiff = Math.abs(Date.now() - lastChanged);
var diffMinutes = Math.floor(timeDiff / (1000 * 60));
var diffHours = Math.floor(timeDiff / (1000 * 60 * 60));
if (diffHours > 0) {
return diffHours + " H";
} else {
return diffMinutes > 0 ? diffMinutes + " M" : "just";
}
]]]
dts: |
[[[
if (states["device_tracker.monkeyphone"].state === 'home') {
return `<ha-icon
icon="mdi:home"
style="width: 18px; height: 50px; color: #39FF33;">
</ha-icon><span></span>`;
} else {
return `<ha-icon
icon="mdi:home"
style="width: 18px; height: 50px%; color: #FF495A;">
</ha-icon><span></span>`;
}
]]]
I tidied up my question so it might be more intuitive to look at,Below is my card code which is taken from yaml
title: Home
resources:
- url: /www/community/xiaomi/xiaomi-smartfan.js
type: js
views:
- path: default_view
title: Home
theme: ios-dark-mode-light-blue-alternative
badges: []
cards:
- show_state: true
show_name: true
camera_view: auto
type: picture-entity
entity: camera.jian_kong
- type: entities
entities:
- entity: sensor.timestamp
name: uptime
- entity: sensor.lock_action
name: status
state_color: true
title: homeinfo
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: media_player.tv_control
name: TV
hold_action:
action: none
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.e1ed_switch_status
name: camera
show_state: false
hold_action:
action: none
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.phone_battery_level
show_name: true
size: 13px
aspect_ratio: 1/1
show_state: true
name: Lee
extra_styles: |
ha-card {
background-image: url('/local/image/mk.png');
}
styles:
card:
- border-radius: 10%
- padding: 1%
- font-size: 10px
- background-size: cover
- font-weight: bold
- color: ivory
- background-position: center
- background-repeat: no-repeat
- background-size: 50% auto
- margin: none
grid:
- grid-template-areas: '"i i" "s s" "n n" "dts dts" "gx gx'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr 1fr 1fr 1fr
img_cell:
- justify-self: end
- width: 52%
- margin-top: 8%
- font-size: 10px
state:
- justify-self: end
- width: 22%
- margin-top: '-32%'
- font-size: 10px
name:
- justify-self: start
- width: 100%
- margin-top: 40%
dts:
- justify-content: start
- align-items: start
gx:
- justify-content: start
- align-items: start
icon:
- color: |
[[[
if (states["sensor.phone_battery_level"].state >= 71) return '#46FF33';
if (states["sensor.phone_battery_level"].state >= 30 && states["sensor.phone_battery_level"].state < 70) return '#F09D38';
else return '#F65A5A';
]]]
custom_fields:
gx:
- align-self: start
- justify-self: start
- width: 50%
- margin-top: '-90%'
dts:
- align-self: start
- justify-self: end
- width: 108%
- margin-top: '-5%'
- font-size: 10px
custom_fields:
gx: |
[[[
var lastChanged = new Date(states["device_tracker.phone"].last_changed);
var timeDiff = Math.abs(Date.now() - lastChanged);
var diffMinutes = Math.floor(timeDiff / (1000 * 60));
var diffHours = Math.floor(timeDiff / (1000 * 60 * 60));
if (diffHours > 0) {
return diffHours + " H";
} else {
return diffMinutes > 0 ? diffMinutes + " M" : "just";
}
]]]
dts: |
[[[
if (states["device_tracker.monkeyphone"].state === 'home') {
return `<ha-icon
icon="mdi:home"
style="width: 18px; height: 50px; color: #39FF33;">
</ha-icon><span></span>`;
} else {
return `<ha-icon
icon="mdi:home"
style="width: 18px; height: 50px%; color: #FF495A;">
</ha-icon><span></span>`;
}
]]]
At first this small piece of code below was located here, which caused all my button-cards to have the image on the path “/local/image/mk.png”, even if I didn’t add this image to the card or When referencing the image function, this image will also appear. I think I have triggered some mechanism, but I don’t know how to deal with it.
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.phone_battery_level
show_name: true
size: 13px
aspect_ratio: 1/1
show_state: true
name: Lee
extra_styles: |
ha-card {
background-image: url('/local/image/mk.png');
}
styles:
card:
- border-radius: 10%
- padding: 1%
- font-size: 10px
- background-size: cover
- font-weight: bold
- color: ivory
- background-position: center
- background-repeat: no-repeat
- background-size: 50% auto
- margin: none
grid:
- grid-template-areas: '"i i" "s s" "n n" "dts dts" "gx gx'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr 1fr 1fr 1fr
img_cell:
- justify-self: end
- width: 52%
- margin-top: 8%
- font-size: 10px
state:
- justify-self: end
- width: 22%
- margin-top: '-32%'
- font-size: 10px
name:
- justify-self: start
- width: 100%
- margin-top: 40%
dts:
- justify-content: start
- align-items: start
gx:
- justify-content: start
- align-items: start
icon:
- color: |
[[[
if (states["sensor.phone_battery_level"].state >= 71) return '#46FF33';
if (states["sensor.phone_battery_level"].state >= 30 && states["sensor.phone_battery_level"].state < 70) return '#F09D38';
else return '#F65A5A';
]]]
custom_fields:
gx:
- align-self: start
- justify-self: start
- width: 50%
- margin-top: '-90%'
dts:
- align-self: start
- justify-self: end
- width: 108%
- margin-top: '-5%'
- font-size: 10px
custom_fields:
gx: |
[[[
var lastChanged = new Date(states["device_tracker.phone"].last_changed);
var timeDiff = Math.abs(Date.now() - lastChanged);
var diffMinutes = Math.floor(timeDiff / (1000 * 60));
var diffHours = Math.floor(timeDiff / (1000 * 60 * 60));
if (diffHours > 0) {
return diffHours + " H";
} else {
return diffMinutes > 0 ? diffMinutes + " M" : "just";
}
]]]
dts: |
[[[
if (states["device_tracker.monkeyphone"].state === 'home') {
return `<ha-icon
icon="mdi:home"
style="width: 18px; height: 50px; color: #39FF33;">
</ha-icon><span></span>`;
} else {
return `<ha-icon
icon="mdi:home"
style="width: 18px; height: 50px%; color: #FF495A;">
</ha-icon><span></span>`;
}
]]]
Later, I moved the card to the bottom, and according to the official statement, adding other button cards in front of the button-card card also cannot solve the problems that have occurred. The following is my current status and official explanation.
official source: custom-cards/button-card: 
Lovelace button-card for home assistant (github.com)
The official notes on the use of this card, but I forgot about him
For a start, have you removed the “extra_styles:” and restarted HA ? … i assume you can read and understand the “Varning” using the “extra_styles:”. Done is Done, so removed it, reboot and fix the other cards, as they seems to have inherit the extra_style, you might need to “copy/paste” the card-code/view, for each cards/views, reinstall custom: button_card, paste back your views/cards
There are other ways to “apply” background images to card, ( 1 is using Card_mod )
I found the cause of the problem. Officially, the extra_styles attribute cannot be used in the first “button-card”. I assume this means all “button” cards (including the ones that came with the system). When I delete the extra_styles attribute in the first “button-card” under the view, it will be normal. Thank you for your reply, the problem has been solved.
1 Like
I found the cause of the problem. Officially, the extra_styles attribute cannot be used in the first “button-card”. I assume this means all “button” cards (including the ones that came with the system). When I delete the extra_styles attribute in the first “button-card” under the view, it will be normal. Thank you for your reply, the problem has been solved.thanks