Custom backgrounds for dashboards views with "fixed" position even on IOS

Hello,

this is my first post here so please correct me if i need to change something. :grinning:

I was trying to configure my new dasboard specifically for my mobile devices. The goal is to have different custom backgrounds on each view.

I want the background to be fixed in position while scrolling through the cards on my iphone.

As of right now im using something like:

background: center / cover no-repeat url("/local/background20/hk-House.jpg") fixed

on each view. On Windows it works just fine, but i failed to make it work on IOS (Safari and HA App) for the last three days (seems to be a known issue).

Im also using card mod to enhance my cards.

I was hoping I might be able to implement some CSS Code to each Dashboard View to make a workaround for this Problem.

I found a CSS code snipet online that claims to be a workaround for the “background-attachment: fixed” variable not working on IOS:

html::before {
    content: ' ';
    display: block;
    //hier den Pfad zu deinem Hintergrundbild einsetzen
    background-image: url('https://deine-domain.de/images/hintergrund-foto.jpg');
    background-position: center;
    background-size: cover;
    height: 100vh; width: 100vw;
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    z-index: -10; // Das hier ist sehr wichtig!
}

Since im not really a programmer i dont know if or how it is possible to implement and test this CSS Code directly to the Dashboard view via card-mod or maybe any other way.