Hello all,
I’m running Home Assistant OS on RPi4 and I’m stuck on a problem which seems quite dumb but I do not find any answer on any forum. In addition, I use lovelace-ui as my panel graphical manager.
In short, I have managed to make a new theme, which is working pretty fine but I’m not able to add a background image by referring to the file path.
As a prerequisite, I do confirm :
- In the lovelace panel code, I’ve added
background: var(--backrgound-image)so that I can refer to the background-image variable in my theme YAML to have a background image dedicated to my theme. - In the configuration.yaml, I have added the configuration needed to add the themes folder :
frontend:
themes: !include_dir_merge_named themes
I know that both parameters are ok since I’m able to copy a generic theme with a background which is working fine. The sample theme I use is using a pre-encoded b64 image into the YAML file.
The goal here is to be able to change the pre-encoded b64 with another jpeg file on the Home Assistant instance.
To go deep into details :
- I have used SSH Plugin or VS Code plugin to push or create my themes file.
- The path of the theme is :
/config/themes/my-theme/my-theme.yaml - I pushed an image on :
/config/themes/my-theme/image.jpeg
Inside my YAML theme file if I do :
background-image: "center / cover no-repeat fixed url('/config/themes/my-theme/image.jpeg')"
==> Image do NOT show.
If I use a base 64 encoder to encode my image and change the YAML theme file to :
background-image: "center / cover no-repeat fixed url('data:image/jpeg;base64,.......')"
==> Image is shown without problem
When I check the log viewer or the log in my browser side, I do not see any error when I use the file path.
Can someone confirm me if the way I do it is OK or not, and how I can have a file path which is available for Home Assistant to use for panel rendering.
Thanks.