Hi all,
I have tried to modify the background image from other themes to my background image.
It works perfectly on PC Chrome browser, but not good in mobile app Chrome browser whereby the background image is scaled bigger and become not nice.
So how to solve this issue in order to have one background image works perfectly on both PC and Mobile App Chrome browser?
Thanks.
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:
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.
