CODEWITHSUNDEEP
cssbackground-image
zimdanen
zimdanen

Reputation: 5626

Fixed background image being moved during scroll

Okay, I tried to remove all the extraneous stuff to a) see if I could find what the issue was, and b) make it easier to post. I have not found the issue, so.. onto plan b!

I have a #page-wrapper that I think should be static, allowing the content to scroll over it, but I'm obviously missing something, since scrolling down reveals a white background. Any thoughts would be greatly appreciated!

    #page-wrapper {
      background: url(https://templatemo.com/templates/templatemo_543_breezed/assets/images/slide-02.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      width: 100%;
      height: 100vh;
    }

https://jsfiddle.net/bjwxfyop/

Upvotes: 1

Views: 106

Answers (2)

Vinu Prasad
Vinu Prasad

Reputation: 968

@zimdanen. I think the issue here is the height being provided as the viewport height. As the content is scrollable either give it 100% or else you can completely remove the height property. Overflow scroll works but I doubt it reflects the actual height of the wrapper if u check the dev tools

#page-wrapper {
  display: table;
  background: url(https://templatemo.com/templates/templatemo_543_breezed/assets/images/slide-02.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

Upvotes: 3

GMAC
GMAC

Reputation: 868

So, over here you are not required to mention height and width.

div's will naturally resize in accordance with their content.

If you set no height on your div, it will expand to contain its content.

#page-wrapper {
  background: url(https://templatemo.com/templates/templatemo_543_breezed/assets/images/slide-02.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Upvotes: 0

Related Questions