CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
parsecer
parsecer

Reputation: 5176

Bootstrap: jumbotron image gets scrolled when scrolling down the page: want to make it fixed

When I scroll down the page the image doesn't behave the same way the header's title does: the title disappears, while the image stays, with the lower part of it getting scrolled:

before scrolling:

enter image description here

after first scroll: enter image description here

after second scroll:

enter image description here

I want the top of the image to disappear after the first scroll, not to stay visible until there's nothing left of the bottom of the image. How should I achieve it? Here's my code:

  <div class="jumbotron">

        <div class="row">
          <div class="col-sm-4"></div>
          <div class="col-sm-16"></div>
          <div class="col-sm-4"></div>

        </div>
  </div>

css:

.jumbotron {
    min-height: 700px;

   background: url(https://i.ebayimg.com/images/g/YFAAAOSw241YXUYL/s-l300.jpg) no-

repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
}

What I want to achieve:

after first scroll:

enter image description here

after second scroll:

enter image description here

after third scroll:

enter image description here

As you can see, in this case the bottom of the image, no the top is visible until the very end.

Upvotes: 0

Views: 1198

Answers (1)

Lunik
Lunik

Reputation: 310

You should use "background-attachment: scroll;" 

background-attachment: fixed; // background will not move with the elements

Refer background-attachment

Upvotes: 1

Related Questions