hi,
can you somebody help to change percentage location higher.
my code
type: custom:fluid-level-background-card
card:
show_state: true
show_name: false
camera_view: auto
type: picture-entity
image: /api/image/serve/403d557dbc269e3587efba40051fcc21/512x512
entity: sensor.mi_10_battery_level
entity: sensor.mi_10_battery_level
fill_entity: sensor.mi_10_battery_level
background_color:
- 0
- 143
- 81
severity:
- value: 42
color:
- 255
- 0
- 0
full_value: "100"
I found gas tank on internet. with Gimp erased tank middle or change color to alpha. save as png
but can not figure out how to move percentage higher
and entity: sensor.mi_10_battery_level is just testing for card. before I get up scale installation
there is absolutely no need to add media queries as you can do it more dynamic, I loved your creativity btw,…
type: picture-elements
elements:
- type: custom:fluid-level-background-card
entity: sensor.water_tank_pico_w_jsn_sr04t
style:
z-index: 1
top: 50%
left: 50%
transform: translate(-50%, -50%)
width: 100%
height: 100%
card_mod:
style: |
ha-card {
text-align: center;
--ha-card-border-color: transparent !important;
box-shadow: none !important;
background: none !important;
border-radius: 50px;
overflow: hidden;
}
#container, .container {
width: 23.3% !important;
height: 70% !important;
position: relative !important;
border-radius: 14px !important;
margin-left: 38.2%;
margin-top: 8%;
# transform: translate(150%, -50%);
opacity: 0.9;
overflow: hidden;
}
level_color:
- 82
- 171
- 255
severity:
- color:
- 255
- 71
- 71
value: 0
- color:
- 112
- 200
- 255
value: 20
- color:
- 56
- 179
- 255
value: 50
- color:
- 0
- 145
- 255
value: 80
fill_entity: input_boolean.water_tank_filling
full_value: "110"
card:
type: custom:card-templater
card:
type: entity
entity: sensor.water_tank_pico_w_jsn_sr04t
title_template: "{{states(''sensor.water_tank_pico_w_jsn_sr04t'')|round(0)}}% "
show_header_toggle: false
show_name: false
name: Water
icon: mdi:water
position:
value: "off"
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 14px;
height: 225px !important;
}
.card-header {
justify-content: center !important;
}
.name {
overflow: unset !important;
}
title: Water Tank Level
image: /api/image/serve/28c8b426342f41911f00efe171696668/512x512
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 100% !important;
opacity: 1
}
use card mod, GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card
here’s another, with different image 
below one is more realistic… 
The card’s author created this thread, can be used for discussing the card:
Hi! I’m a bit stuck… I’m not able to change the font size of the value.
I want to show “-4890” but it’s only showing a few caracters.
I allready modified the font size but it’s not changing anything.
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 13px;
height: 225px !important;
}
.card-header {
justify-content: center !important;
}
.name {
overflow: unset !important;
}
Thanks
value is negative. -4.89
and also paste complete template code. and if you just want to change the font-size kindly read card-mod docs
Resolved!
I had to enter “important!” when changing font size…
Thanks alot for share , would you upload the png file for the tank .thanks
Sure, but I also got this here :
https://community.home-assistant.io/t/card-for-showing-liquids-fluid-level-background-card/758558/6?u=donder24
can you share cylinder3.png pls
can share the tank image.png
pls
Hi All,
hoping someone can help me fix this card not quiet showing correctly
the value doesn’t seam to be rounding to whole numbers only resalting in it getting cut off.
type: picture-elements
elements:
- type: custom:fluid-level-background-card
entity: input_number.homeseer_2056
style:
z-index: 1
top: 50%
left: 50%
transform: translate(-50%, -50%)
width: 100%
height: 100%
card_mod:
style: |
ha-card {
text-align: center;
--ha-card-border-color: transparent !important;
box-shadow: none !important;
background: none !important;
border-radius: 50px;
overflow: hidden;
}
#container, .container {
width: 23.3% !important;
height: 70% !important;
position: relative !important;
border-radius: 14px !important;
margin-left: 38.2%;
margin-top: 8%;
# transform: translate(150%, -50%);
opacity: 0.9;
overflow: hidden;
}
level_color:
- 82
- 171
- 255
severity:
- color:
- 255
- 71
- 71
value: 0
- color:
- 112
- 200
- 255
value: 20
- color:
- 56
- 179
- 255
value: 50
- color:
- 0
- 145
- 255
value: 80
fill_entity: null
full_value: "100"
card:
type: custom:card-templater
card:
type: entity
entity: input_number.homeseer_2056
title_template: "{{states(''input_number.homeseer_2056'')|round(0)}}% "
show_header_toggle: false
show_name: false
show_icon: false
icon: mdi.water
position:
value: "off"
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 14px;
height: 225px !important;
}
.card-header {
justify-content: center !important;
}
.name {
overflow: unset !important;
}
title: Water Tank
image: /api/image/serve/3162060fd25ddc962f6f6d4da1148cde/512x512
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 100% !important;
opacity: 1
}
Helo
I’m a beginner on HA. I want to add Fluid Level to my water tank. I added Lovelace Fluid Level Background Card but I don’t know how to use it. Can you please help me understand how to install this card? Thank you in advance
The easiest way to install a custom card is by using HACS.
Thank you very much for your replay. I finally managed to
install it. I have an EPTTECH TS0601 Liquid Level Probe. I use the entity sonsensor.0x583bc2fffe031a6f_liquid_depth which measures the depth of the liquid but on my map the wave level does not move. I used lots of configurations but without result. I don’t understand where the problem is. Attached photo and my code.
type: custom:fluid-level-background-card
card:
type: entity
entity: sensor.0x583bc2fffe031a6f_liquid_depth
needle: true
severity: []
max: 130
name: Niveau
full_value: "110"
entity: sensor.0x583bc2fffe031a6f_liquid_depth
fill_entity: sensor.0x583bc2fffe031a6f_liquid_depth
I’ve had similar problem days ago, when i started with this card. The point is (perhaps a bit too hidden) that by default it assumes percents, so full is 100 and empty is 0. If you want to take into account real numbers, you must define full_value according to your needs. In your case you have current level 0,91m and full_value set to 110, that’s why level is at the bottom. If you change full_value to, say, 5 (for test) it will clime.
(EDIT: i don’t think “max” is used in this card…)
Also note that severity settings assumes percents even if you have full_value set. So, for example if you have set your full_value to 10 and you want red color below, say, 2 then: 2 is 20% from 10, so set severity to 20.
I have a sensor in % but it always remains at 100% so it cannot be used with this card. Is it possible to convert the value of my “sensor.0x583bc2fffe031a6f_installation_height” which is in mm into % in another probe?
This option does not belong here.
Better to check with an increased height of this card.