Hello,
yes, this is the default card with the gradient
![test1](https://community-assets.home-assistant.io/original/4X/3/3/5/3354c0b4c3fd2423af47a91ad1a3bae36325a760.jpeg)
here is the card with my gif
![test](https://community-assets.home-assistant.io/original/4X/7/f/b/7fb1e9af58662f0b69edb9bca9560da1899d9ff2.gif)
i want that the gif is under the gradient, or the gradient over the gif.
here is the full code, under extra styles i actually replaced the gradient, but i want the gradient + gif.
weather:
variables:
rain: ''
entity_picture: |
[[[
return entity && entity.state
? `/local/animated-weather-icons/${entity.state}.svg`
: '?';
]]]
name: |
[[[
return entity && entity.attributes && entity.attributes?.temperature
? `${entity.attributes.temperature.toFixed(0)}<sup>°</sup>`
: '?';
]]]
custom_fields:
rain: |
[[[
return entity && entity.attributes && entity.attributes?.temperature
? `${states[variables.rain].state} % Regen`
: '?';
]]]
home: |
[[[
return entity
? `Heggen`
: '?';
]]]
show_icon: true
show_state: false
show_label: false
show_entity_picture: true
aspect_ratio: 1/1
styles:
############################################################################
# GRID (#container)
############################################################################
grid:
- grid-template-areas: |
'i'
'home'
'n'
'rain'
- grid-template-columns: 1fr
- grid-template-rows: min-content repeat(2, 1fr) repeat(2, min-content)
- gap: 0%
entity_picture:
- position: relative
- margin-top: 0px
- margin-left: -45%
icon:
- align-self: left
- justify-self: flex-end
name:
- justify-self: flex-end
- font-size: 1.4rem
- margin-top: 10%
- margin-bottom: 15%
- font-weight: bold
- text-transform: lowercase
label:
- width: 100%
state:
- justify-self: start
card:
- border-radius: var(--custom-button-card-border-radius)
- padding: 1rem
- height: 100%
- background-position: center
- background-repeat: no-repeat
# - background-image: >
# [[[
#
# return variables.entity_picture === undefined
# ? 'linear-gradient(0deg, rgba(117,121,128,1) 0%, rgba(90,113,157,1) 38%, rgba(94,108,136,1) 100%)'
# : 'linear-gradient(0deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 100%), url(' + entity_picture + ')';
#
# ]]]
color: |
[[[
const active = 'var(--nolu-color-active, rgb(22, 22, 22))';
const inactive = 'var(--nolu-color-inactive, rgb(245, 245, 245))';
const onState = ['on', 'auto', 'home', 'active', 'enabled', 'heat', 'cool', 'heat_cool', 'fan', 'open'];
const offState = ['off', 'unknown', 'unavailable', 'disabled', 'closed', 'not_home'];
return variables && variables.state && onState.some(state => variables.state.toLowerCase() === state)
? active
: inactive;
]]]
############################################################################
# CUSTOM FIELDS
############################################################################
custom_fields:
home:
- width: 200%
- place-self: start
- margin-left: -73%
- margin-top: 0px
- font-size: 1.2rem
- font-weight: light
rain:
- justify-self: flex-end
- font-size: 0.9rem
- font-weight: light
# https://developers.home-assistant.io/docs/core/entity/weather/#recommended-values-for-state-and-condition
extra_styles: |
[[[
let caase_rainy = '/local/weather_back/rainy1.gif';
let caase_cloudy = '/local/weather_back/cloudy.gif';
let caase_partly_cloudy = '/local/weather_back/partly_cloudy.gif';
let cardBgColor = 'rgba(43, 104, 233, 1)';
let cardBgImage = 'linear-gradient(0deg, rgba(43, 104, 233, 1) 0%, rgba(85, 187, 240, 1) 100%)';
if (entity && entity.state) {
switch(entity.state) {
case 'partlycloudy':
cardBgColor = 'rgb(117,121,128)';
cardBgImage = 'url(' + caase_partly_cloudy + ')';
break;
case 'cloudy':
cardBgColor = 'rgb(117,121,128)';
cardBgImage = 'url(' + caase_cloudy + ')';
break;
case 'pouring':
case 'rainy':
cardBgColor = 'rgb(117,121,128)';
cardBgImage = 'url(' + caase_rainy + ')';
break;
case 'clear-night':
cardBgColor = 'rgb(7,21,45)';
cardBgImage = 'linear-gradient(0deg, rgba(7,21,45,1) 0%, rgba(18,45,97,1) 38%, rgba(1,11,32,1) 100%)';
break;
case 'xxxxx':
cardBgColor = '';
cardBgImage = '';
break;
}
}
return `
#aspect-ratio {
height: 100%;
}
#name > sup {
color: rgba(255, 255, 255, 0.5);
font-size: 2rem;
}
#wind span,
#humidity span,
#visibility span {
display: block;
width: 100%;
text-align: center;
}
#wind ha-icon,
#humidity ha-icon,
#visibility ha-icon {
--mdc-icon-size: 20px;
margin-top: 0.5rem;
}
#wind #title,
#humidity #title,
#visibility #title {
font-size: 0.95rem;
font-weight: 500;
margin-top: 0.5rem;
}
#title b {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
}
#wind #subtitle,
#humidity #subtitle,
#visibility #subtitle {
color: rgba(255, 255, 255, 0.6);
font-size: 0.90rem;
margin-top: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#card {
background-color: ${cardBgColor};
background-image: ${cardBgImage};
}
@keyframes card_bounce {
0% {
transform: scale(1);
}
15% {
transform: scale(0.9);
}
25% {
transform: scale(1);
}
30% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
`;
]]]
i hope you understand what i mean ![:smiley: :smiley:](https://community.home-assistant.io/images/emoji/twitter/smiley.png?v=10)
here is the original code with the gradient
switch(entity.state) {
case 'partlycloudy':
cardBgColor = 'rgb(117,121,128)';
cardBgImage = 'url(' + entity_picture + ')';
cardBgImage = 'linear-gradient(0deg, rgba(117,121,128,1) 0%, rgba(90,113,157,1) 38%, rgba(94,108,136,1) 100%)';
break;
case 'cloudy':
cardBgColor = 'rgb(117,121,128)';
cardBgImage = 'linear-gradient(0deg, rgba(117,121,128,1) 0%, rgba(117,121,128,1) 38%, rgba(94,108,136,1) 100%)';
break;
case 'pouring':
case 'rainy':
cardBgColor = 'rgb(117,121,128)';
cardBgImage = 'linear-gradient(0deg, rgba(117,121,128,1) 0%, rgba(90,113,157,1) 38%, rgba(94,108,136,1) 100%)';
break;
case 'clear-night':
cardBgColor = 'rgb(7,21,45)';
cardBgImage = 'linear-gradient(0deg, rgba(7,21,45,1) 0%, rgba(18,45,97,1) 38%, rgba(1,11,32,1) 100%)';
break;
case 'xxxxx':
cardBgColor = '';
cardBgImage = '';
break;