Full page fixed background jumps when scrolling because of the bottom bar on mobile

Question

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!

Both width:100vw; and height: 100vh; that defined at #bg class are not responsive to device. You need to make it responsive. — Bhasyakarulu Kottakota, May 11 '20 at 16:02

score 1 · Accepted Answer · answered May 14 '20 at 19:38

1

Finally, I found a solution, here is my solution.

HTML

<body>
    <div id="bg"></div>
    CONTENT...
</body>

CSS

#bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    transform: scale(1.0); 
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("path");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

answered May 14 '20 at 19:38

Jordan

63
1
7

Thank you. I was tearing my hair out. This worked perfectly. – reknirt Feb 19 '21 at 15:42
Can you explain my it actually works? I had a similar problem. I did not need to add 'after', but adding transform: scale(1.0) actually solved the problem but it is extremely hurtful that I do not know why it solves it all. – Patrik Nusszer May 24 '21 at 10:19

score 0 · Answer 2 · 2020-05-12T08:31:48.370

This can be one of the options without fixed background div.

body {
  background: url('https://css-tricks.com/examples/FullPageBackgroundImage/images/bg.jpg'); no-repeat;
  background-size: cover;
  height: 220vh;
}
div {
  position: absolute;
  border: 2px solid white;
  background-color: white;
  width: 40vw;
  height:min-content;
  display: inline-block;
  left: 25%;
  padding: 5vh 5vh 0vw 5vw;
  text-align: left;
  font-size: 4vh;
  top: 10vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div>
    <p>
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

    </p>
  </div>
</body>
</html>

Full page fixed background jumps when scrolling because of the bottom bar on mobile

2 Answers2