Background image per tab in lovelace view?

Configuration Frontend
1

Not sure my terminology is right here but I have one lovelace dashboard, within that dashboard I have multiple tabs.

How do I set a different background image per tab?

At the moment I have this in my lovelace UI:

title: HOME

   
background: >-
  center / cover no-repeat
  url("/local/images/background.jpg")
  fixed

views:



######################################################################################################################
####################    DINING ROOM TAB           ########################################################################
######################################################################################################################
  - title: Kitchen
    icon: mdi:table-chair
    cards:

I thought that by adding:

######################################################################################################################
####################    DINING ROOM TAB           ########################################################################
######################################################################################################################
  - title: Kitchen
    icon: mdi:table-chair
    background: >-
      center / cover no-repeat
      url("/local/images/c4background.jpg")
      fixed
    cards:

I would see the background image on this tab? It does not show the background defined at the very top of my code, while all other tabs do, but it does not show the image either?

2

You can’t just make up fields and expect them to work. Always consult the docs for what fields are available. The only way you can make this work is by using card mod which is not built into HA.

3

Here you go :slight_smile:

views:
  - title: Main
    id: Main
    background: >-
      center / cover no-repeat fixed
      url('https://live.staticflickr.com/3798/11051378005_50b62511bb_b.jpg')
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: light.1tecto_cozinha
  - title: test
    path: test
    badges: []
    cards: []
1 Like
4

Thanks petro. I found it hard to read / workthrough the docs for this. In the docs it says:


CONFIGURATION VARIABLES
views list REQUIRED
A list of view configurations.

title string REQUIRED
The title or name.

badges list (optional)
List of entities IDs or badge objects to display as badges. Note that badges do not show when view is in panel mode.

cards list (optional)
Cards to display in this view.

path string (optional, default: view index)
Paths are used in the URL, more info below.

icon string (optional)
Icon-name from Material Design Icons.

panel boolean (optional, default: false)
Renders the view in panel mode, more info below.

background string (optional)
Style the background using CSS, more info below.

but without examples it was hard to work out if this was what I wanted

6

Then yes, it should work without card mod unless that’s a typo in the docs. Try refreshing your cache. But you should include @Soccs’s changes

1 Like
7

Thank you.

so adding this works perfectly:

    background: >-
      center / cover no-repeat fixed
      url('https://live.staticflickr.com/3798/11051378005_50b62511bb_b.jpg')

but adding this just gives me a plain grey background?


    background: >-
      center / cover no-repeat fixed
      url("/local/images/background.jpg")

tried it with single speech marks too. the image is in the right place:

Screenshot 2021-02-22 at 19.46.12
Screenshot 2021-02-22 at 19.46.12788Ă—658 36.3 KB

8

Turns out I need the “fixed” bit after a local image

    background: >-
      center / cover no-repeat
      url("/local/images/c42background.jpg")
      fixed

this is exactly what i had at the start of this, but when clicking on the image in the image folder it brought up a load of meta text, deleted, re-uploaded, added the above and all working. separate images per tab!

thank you

6 Likes