How to set theme background image so that one background image works perfectly on both PC and Mobile App Chrome browser?

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”.

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

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

I did, but it’s not working. I think the files are in the wrong place.

Well to be fair he asked more than one question about backgrounds and it wasn’t that clear.