No background image with panel true

soylant · July 20, 2020, 9:50pm

Hi
why can’t i use backuground image when using panel:true?? it is working when panel:false.
I have this in my views

KTibow · July 20, 2020, 9:53pm

It’s because instead of using the backgroundthat you set, since the card is full-screen, it uses the background of the card. Try using card-mod and set the background there. Also, when you post in the forums, use the ` at the start and end of the code text.

soylant · July 20, 2020, 10:00pm

not sure if I understand you correct, i don’t want background image on my cards, I want it on the whole page if you know what i mean

KTibow · July 20, 2020, 10:01pm

Yes, but when you use panel: true the card is the whole page.

soylant · July 20, 2020, 10:06pm

okay, I’am pretty new to this do you have an sampel of using card-mod with background??

KTibow · July 20, 2020, 10:19pm

Well, first do you have HACS installed? You should. The way I did it was by going to File Editor, choosing more, and choosing “Execute shell command”.

First, type in mkdir -p custom_components/hacs and press Execute.
Type in cd custom_components and press Execute.
Execute curl https://github.com/hacs/integration/releases/download/1.2.2/hacs.zip -L --output hacs.zip.
Execute unzip hacs.zip -d hacs
Execute `rm hacs.zip.
Reboot Home Assistant.
Go to integrations under config, and set up HACS.
Reboot Home Assistant.
Open HACS and click on frontend.
Click on the plus and search for card-mod.
Click on card-mod, scroll down, and click Install this repository in HACS.

Let me know when you’re done and I’ll send the example code.

soylant · July 21, 2020, 5:37am

I already have Hacs and card-mod installed, I have been running a Lovelace dashboard on a touch screen I our kitchen for som time now at it has been running beautiful, but then I would like to try HomeKit-cards and in the description they say it’s best to use panel mode, but after that I lost my background image and it is also looking terrible on the the app on my phone, so I can’t get my head around where to put in background, I am still learning

KTibow · July 21, 2020, 1:57pm

Try something like this on the panel card:

style: |
  ha-card {
    background: 'center / cover no-repeat url("/local/images/original-homekit-wallpaper.png") fixed;
  }

soylant · July 21, 2020, 5:58pm

is this right?? title: Højvangicon: mdi:home-assistantpanel: truecards: - type: custo - Pastebin.com

KTibow · July 21, 2020, 8:00pm

Yup, except I forgot another ' before the end of the ;. Just add that, save, and it should work.

soylant · July 21, 2020, 8:22pm

it is still not working, I have this title: Højvangicon: mdi:home-assistantpanel: truecards: - type: custom: - Pastebin.com

KTibow · July 21, 2020, 8:26pm

Perhaps

style: |
  ha-card {
    background-image: 'url("/local/images/original-homekit-wallpaper.png")';
  }

I’m going to try installing layout-card myself and inspect it.

KTibow · July 23, 2020, 1:17am

I’m having trouble with this, I’d recommend opening an issue over at layout-card.

nindtendo · August 8, 2020, 12:05am

This problem came with some update ago right?
I wasn’t updating my HA for a time, and background: […] url([…]) worked fine with panel

now we have to use card-mod ?

Murada99 · August 24, 2022, 10:36am

just type without ’ in the ha-card and it works:

background: center / cover no-repeat url("/local/images/original-homekit-wallpaper.png");