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.
tom_l
April 9, 2019, 8:03am
2
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”.
2 Likes
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
tom_l
April 10, 2019, 1:20am
4
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.
maurizio53
(Maurizio Fabiani)
April 16, 2020, 5:36pm
6
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?
tom_l
April 16, 2020, 5:56pm
7
Lovelace does not accept templates without a custom card like this:
I had looked at the config-template card but, since I wanted to be able to reuse the Jinja2 templates I use in the rest of Home Assistant, I decided to see if I could create a card like that which could apply Jinja2 templates Lovelace cards.
Introducing the card-templater card
https://github.com/gadgetchnnel/lovelace-card-templater
Installation
This requires card-tools to be installed, check the link for details on installing this if you don’t have it installed.
This card can either be instal…
Or this if you prefer JavaScript to JINJA
Nice one Ian!
niconath
(niconath)
April 18, 2020, 12:41am
8
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
tom_l
April 18, 2020, 1:01am
9
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
niconath
(niconath)
April 18, 2020, 9:37am
11
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
niconath
(niconath)
April 18, 2020, 9:40am
12
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
niconath
(niconath)
April 18, 2020, 10:05am
14
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.
niconath
(niconath)
April 18, 2020, 10:23am
16
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
niconath
(niconath)
April 18, 2020, 10:41am
19
I did, but it’s not working. I think the files are in the wrong place.
tom_l
April 18, 2020, 10:47am
20
Well to be fair he asked more than one question about backgrounds and it wasn’t that clear.