Hello,
this is my first post here so please correct me if i need to change something.
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.