Well I finally got this to work using the code below. I can change the background based on a variable. Thanks to all who gave their advice and opinions. I only have one problem now. I am not able to edit the code using the conventional ‘Edit’ on this page (clicking the pencil in the upper right corner). The only way I can edit is with the Raw Configuration Editor.
Just wanted to post what I had in case someone else stumbles on this while researching the same topic.
button_card_templates:
custom_background:
styles:
card:
- background: |
[[[
if (states['input_select.background_selector'].state === 'Day') {
return 'url("/local/CHC.jpeg")';
} else if (states['input_select.background_selector'].state === 'Night') {
return 'url("/local/Wrigley_Winter.jpg")';
} else {
return 'var(--primary-background-color)';
}
]]]
- background-size: cover
- background-position: center
- background-repeat: no-repeat
- height: 100vh
- width: 100vw
- position: fixed
- top: 0
- left: 0
views:
- title: Home
panel: true
cards:
- type: custom:button-card
template: custom_background
styles:
card:
- overflow: auto
- padding: 16px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:teamtracker-card
entity: sensor.cubbies
visibility:
- condition: state
entity: sensor.cubbies
state: NOT_FOUND
- type: entity
entity: sensor.spring_training
name: Days until Spring Training
icon: mdi:baseball
- type: entity
entity: sensor.opening_day
name: Days until Opening Day
icon: mdi:baseball-outline
type: panel
icon: ''