I can not get an image to show as background on the horizontal stack in either of the below card configs. All shows well but not the image. I specifically dont want it to show up on the full card, which is possible setting the style on the top hierarchy of the card. Please have a look what is wrong?:
- type: custom:stack-in-card
keep:
background: true
cards:
- type: horizontal-stack
style: |
ha-card {
background: url('/local/images/vijver.jpg');
cards:
- type: custom:button-card
template: button_switch
entity: switch.vijverpomp_links
triggers_update: sensor.vijverpomp_links_actueel
name: Pomp left
- type: custom:button-card
template: button_switch
entity: switch.vijverpomp_rechts
triggers_update: sensor.vijverpomp_rechts_actueel
name: Pomp right
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: entities
entities:
- entity: input_boolean.vijverpompen_alterneren
secondary_info: last-changed
- entity: binary_sensor.vijverpompen
secondary_info: last-changed
- entity: sensor.vijverpompen
secondary_info: last-changed
or
- type: entities
entities:
- type: custom:hui-horizontal-stack-card
style: |
ha-card {
background: url('/local/images/vijver.jpg');
background-size: cover;
}
cards:
- type: custom:button-card
template: button_switch
entity: switch.vijverpomp_links
triggers_update: sensor.vijverpomp_links_actueel
name: Pomp left
- type: custom:button-card
template: button_switch
entity: switch.vijverpomp_rechts
triggers_update: sensor.vijverpomp_rechts_actueel
name: Pomp right
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- entity: input_boolean.vijverpompen_alterneren
secondary_info: last-changed
- entity: binary_sensor.vijverpompen
secondary_info: last-changed
- entity: sensor.vijverpompen
secondary_info: last-changed
tom_l
March 30, 2021, 7:40am
2
I don’t think it is possible. Stacks don’t have a background or border.
thats too bad really. I can get it to show as an additional picture card of course:
- type: entities
entities:
- type: custom:hui-element
card_type: picture
image: /local/images/vijver.jpg
style: |
ha-card {
box-shadow: none;
margin: -16px -16px 0px -16px;
}
which amounts to the same results as when using a header:
- type: entities
header:
type: picture
image: /local/images/vijver.jpg
entities:
or, as said as background for the full card, but as you can see that would require some more styling on the individual elements:
- type: entities
style: |
ha-card {
background: url('/local/images/vijver.jpg');
background-size: cover;
}
entities:
really ‘need’ the background for a stack… maybe Ill check with Romrider if he is willing to consider a FR
tom_l
March 30, 2021, 7:56am
4
Yeah my workaround is to use an entities card instead of a vertical stack (using custom-hui-element for the contained cards). But there’s not really a solution for a horizontal stack.
yes, thats what I do too (never use the vertical-stack anymore unless I want the horizontal separation between the cards explicitly).
Added a picture glance to the options:
but that too isnt as expressive as I would like it to be. Btw, what horrid tooltips are displayed on that card, never noticed that before:
This should work:
- type: custom:stack-in-card
mode: horizontal
title: test
keep:
background: true
style: |
ha-card {
background: blue;
}
cards:
- type: custom:button-card
entity: sun.sun
aspect_ratio: 1/1
- type: custom:button-card
color_type: blank-card
1 Like
thanks, and yes, it does, see the bottom card, in comparison to the glance card art the top, and the middle entities card, with a mod-card mod:
type: entities
entities:
- type: custom:hui-element
card_type: custom:mod-card
style: |
ha-card {
background: url('/local/images/vijver.jpg');
margin: -16px -16px 0px -16px;
background-size: cover;
}
card:
type: horizontal-stack
cards:
which immediately shows the image isn’t to suited for a background, considering the text color to pick
type: custom:stack-in-card
mode: horizontal
title: Vijverpompen
keep:
background: true
style: |
ha-card {
color: darkblue;
background: url('/local/images/vijver.jpg');
background-size: cover;
}
cards:
- type: custom:button-card
template:
- button_switch
- spin
style: |
ha-card {
box-shadow: none;
opacity: 0.9;
}
entity: switch.vijverpomp_links
triggers_update: sensor.vijverpomp_links_actueel
name: Pomp left
- type: custom:button-card
template:
- button_switch
- spin
style: |
ha-card {
box-shadow: none;
opacity: 0.9;
}
entity: switch.vijverpomp_rechts
triggers_update: sensor.vijverpomp_rechts_actueel
name: Pomp right
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
Hello,
Can anyone help please?
1 Like
petro
November 17, 2021, 10:30pm
9
What feature, that code is working as expected outside the card mod portion.
you could try card-mod
here’s an example of what i did with my custom weather card.
type: custom:weather-card#EFEFEF ;https://www.eea.europa.eu/themes/biodiversity/state-of-nature-in-the-eu/state-of-nature-2020-subtopic/image_print ) rgba(50, 50, 50, .35);
