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.

7

After a lot of trying around, researching and frustration, I finally found a way to fix iOS’ webkit behavior :slight_smile: I only did some quick testing so far, so please let me know if there is anything wrong or weird.

Step 1: Create a css file: /hacsfiles/dashboard_resources/background-fix.css

@media (prefers-color-scheme: dark) {
  html::before {
      content: ' ';
      display: block;
      background-image: url('[/path/to/your/light-background') !important;
      background-position: center;
      background-size: cover;
      height: 100vh; width: 100vw;
      top: 0; bottom: 0; left: 0; right: 0;
      position: fixed;
      z-index: -10;
  }
}

@media (prefers-color-scheme: light) {
  html::before {
      content: ' ';
      display: block;
      background-image: url('[/path/to/your/light-background') !important;
      background-position: center;
      background-size: cover;
      height: 100vh; width: 100vw;
      top: 0; bottom: 0; left: 0; right: 0;
      position: fixed;
      z-index: -10;
  }
}

You can also remove the @media at-rule if you don’t want to have separate backgrounds for light and dark.

Step 2: Add this file as a dashboard resource
In Home Assistant go to Settings > Dashboards > … (top right corner) > Resources.

Add a new resource (bottom right corner).
URL: /hacsfiles/dashboard_resources/background-fix.css
Resource type: Stylesheet

Step 3: Clear cache and reload
As the title says, clear your caches and reload the page. The fix should be applied now.

Step 4: (Optional) disable theme background
If you have a theme which sets a background image, you have to disable that.

Source of css workaround: background-attachment fixed funktioniert nicht auf iOS

2 Likes
8

So this solution is the only one I’ve found that actually makes the background stick on an iOS device. The problem is though that once I set it using a created .css file I can’t seem to get rid of it other than deleting the .css file as a resource. I’ve cleared my cache, I’ve closed all my apps etc etc but so far no go. So if I try to switch between light and dark theme I can kinda forget about it.