Cannot get the background-image to stay fixed

Configuration Frontend
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