Cannot get the background-image to stay fixed

Configuration Frontend
1

Hi,

I cannot seem to get the lovelace theme background-image to stay fixed so that it does not scroll with the page. If the page is longer than the screen the picture either stretches to the full length and scrolls or ends at the bottom and disappears when scrolling further down if I do not use the repeat option (depending on which settings I use). I cannot get the background image to be fixed when scrolling.

If I understand it correctly I should be able to use these properties: scroll | fixed | local

None of them make any difference.

This is the code I find in the docs everywhere and use:

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

I am using a pretty common setup with custom header, multiple views and swipe navigation.

Is this working as designed or am I missing something? Does it work for you?

Thanks!

2

Not working for me either :(, same problem here.

3

Found a solution! You can use Thomas Loven’s Card-Mod 2.0, and use this in your template, also make sure to define card-mod-theme: theme name in your themes yaml:

  card-mod-view: |
    :host {
      background: url('/local/img/background.jpg') !important;
    }
4

Thanks, I tried that and I thought it fixed it at first but that was not the case for me. When the view was longer than the background picture the picture was repeated again and the background still scrolls with the view.

5

You could try to change it to:

  card-mod-view: |
    :host {
      background: center / cover no-repeat url("/local/img/background.jpg") fixed !important;
    }

Though I can’t test it right now.

Update: Yea! This works me. Only downside: depending on the vertical length of your lovelace page the background is differently zoomed.

6

Did you find a solution (without card-mod)? It seems like and WebKit issue rather than anything.