I use a small file that is tiled to fit the background. This tiles by default:
- background: url("/local/background/4.jpg")
Do a google image search for “free seamless background images”.
Mind to upload your background image for my testing?
Just to see how it works well on my side
Anyway, my background code is slight different compared to yours:
background: center / cover no-repeat url("/local/background2.jpg") fixed
You have to remove the center / cover no-repeat … fixed part so the image will tile. But you do need a seamless image to do this.
Here’s some you can try:
2 Likes
sorry to bump this, but has a way been found to get the app to auto resize the background image, and truly be fixed? It doesn’t fix in my setting with:
background: center / cover no-repeat url("/local/lovelace/images/hue_background.jpg") fixed
desktop is fine, but image is too large on the App mobile, which is probably caused by the ‘cover’. Using
background: center / auto repeat url("/local/lovelace/images/hue_background.jpg") fixed
seems a good alternative. Doesn’t make a difference on desktop (with rather large images), but rescales the images to correct proportions in mobile. Since they are too small for the portrait orientation, use repeat, to have it display oer and over again.
If only the ‘fixed’ would be recognized by the app, that would help a greet deal.
I have this css code inside a card to show the background of a cover when my media player spotify is playing, but it doesn’t work. No image is used as background.
background-image: url('{{ state_attr('media_player.spotify_mfabiani53', 'entity_picture') }}');
background-position: cover;
background-repeat: no-repeat;
background-size: 100% 114%;
Any hints?
Lovelace does not accept templates without a custom card like this:
Or this if you prefer JavaScript to JINJA
Good morning, sir,
In which file do you do the background modification, in the .yaml configuration?
Can you tell me more, I’m just starting out and I only use file editor.
Could you tell me how to change the background on HAdashboard please?
Thanks in advance
See: https://www.home-assistant.io/integrations/frontend/#defining-themes
And for some examples: https://community.home-assistant.io/c/projects/themes
I don’t use HAdashboard so someone else who does may help you there. Or search the forum. I found this: HADashboard Theme Background
doesnt help to give links for themes that are not for hadashboard.
@niconath the background from HAdashboard can be modified if you use a custom skin.
https://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#skin-development
Yes, thank you very much,
The problem is that I’m a novice and it’s really complicated for me to assimilate everything.
Thank you for your answers
What I would like to do first would be to add a picture. Jpg in the background but I don’t know in which folder to put it (I only use file editor)
And then I don’t know the code to add to say to put this image.
i assume you use appdaemon 4.
-
create a folder config/custom_css/your_skin_name
-
in that folder place the 2 files you find here: https://github.com/home-assistant/appdaemon/tree/dev/appdaemon/assets/css/default
-
create the folder config/web/img
-
place your jpg in that folder
-
open the css file from the skin
-
lookup the section body or gridster and edit that css (if you dont know any CSS, then you need to learn something from that)
-
add the background image with url /web/img/your_jpg.jpg
you can lookup the other default skins to see how
the defaults skins (obsidian, glassic, zen and simplyred) can be found here: https://github.com/home-assistant/appdaemon/tree/dev/appdaemon/assets/css
OK great thanks, I’ll try, yes I’m using appdaemon 4.
For the skins already present, I saw thank you but it remains basic.
Adding files with file editor is not a problem?
file editor, samba, scp, etc.
you can add files anyway you like, when you make sure that its saved by the right user. so that the filerights are correct.
All right, I did what you said, but it’s not working.
Where should I put the custom_css folder?
In config/appdaemon I already have a /css folder, I don’t understand.
when you call your dashboard url you need to tell which skin to use.
so in your browser use
http:dashboard_url?skin=test
Well to be fair he asked more than one question about backgrounds and it wasn’t that clear.
Otherwise, to make it simpler, how to modify an image of an already existing theme?