2

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

We get a jump when scrolling

Same issue as above

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!

2
  • Both width:100vw; and height: 100vh; that defined at #bg class are not responsive to device. You need to make it responsive. Commented May 11, 2020 at 16:02
  • How do you do so?
    – Jordan
    Commented May 11, 2020 at 16:21

4 Answers 4

6

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;
    }
}
3
  • Thank you. I was tearing my hair out. This worked perfectly.
    – reknirt
    Commented Feb 19, 2021 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. Commented May 24, 2021 at 10:19
  • amazig. wtf though? Why does this work? Commented Mar 5 at 10:10
0

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>

0
0

You can use a hack, that uses position: fixed for bg https://css-tricks.com/the-fixed-background-attachment-hack/

0

This can also be fixed with the new lvh and lvw units on the html element. I was able to fix the jumping background by using the large viewport height and width at 100% on my html and body elements. According to this article

https://redstapler.co/all-css-viewport-units-svh-lvh-svw-lvw-dvh-dvw-explained/

these units will adjust to the largest viewport size for the device and disallow automatic resizing based on interfaces.

1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented May 8, 2023 at 21:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.