I know it is a well-known issue with plenty of answers on the internet but 2 days of research later I still don't find a solution. What I want is a full-page fixed background with content above it. The issue is when we scroll down the bottom bar disappears leaving a white space then the background is resized creating an unpleasant jump for the user. Here are some examples of what I tried and doesn't work on iOS (I only have an iPhone at my disposal).
- The naive solution
CSS
body {
background: url("path");
background-attachment: fixed;
width:100%;
height: 100%;
background-size: cover;
background-position: center;
}
No jump at all, however the background is not covered nor centered
- I then learned background-attachment fixed is badly supported on mobile so I did the following
HTML
<body>
<div id="bg"></div>
CONTENT...
</body>
CSS
#bg {
background: url("path");
position:fixed;
width:100vw;
height: 100vh;
background-size: cover;
background-position: center;
}
The background is well centered and covered but we get the little jump when scrolling because of the bottom bar
- I then read a little trick with body:before (background: fixed no repeat not working on mobile)
We get a jump when scrolling
- I also tried different libraries (https://www.jquery-backstretch.com)
Same issue as above
- Some other tricks with javascript (https://css-tricks.com/the-trick-to-viewport-units-on-mobile/) (Background image jumps when address bar hides iOS/Android/Mobile Chrome)
Same issue as above
And maybe some other tricks that I forgot. However, most of these tips date back to 5 years sometimes more. I hope I missed something and that today we finally have a solution to this issue. Any solutions with javascript or not are welcomed even libraries.
Here is an example of what I want (https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php). However, this trick doesn't work we get a jump as well.
Thank you for your future help!