Изображение Jumptron исчезает, когда я прокручиваю вниз

Question

Я использую bootstrap jumptron и фоновое изображение. При прокрутке вниз фоновое изображение исчезает, оставляя класс div jumptron только показом заголовка. Как это можно исправить, когда я прокручиваю вниз изображение не исчезает. Другой контент работает правильно. Следующие файлы предоставляют более подробную информацию. Следующие файлы находятся в приложении Rails 5.

index.html.erb

<div class="bg"></div> 
 
<div class="jumbotron"> 
 
    <h1>Organize and Mobilize</h1> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <h2>We need you to take action</h2> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
 
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
 
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
 
    Aliquam in felis sit amet augue. 
 
    <br> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
 
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
 
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
 
    Aliquam in felis sit amet augue. 
 
    <br> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
 
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
 
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
 
    Aliquam in felis sit amet augue. 
 
    <br> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
 
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
 
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
 
    Aliquam in felis sit amet augue. 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <h2>Page Content</h2> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
 
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
 
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
 
    Aliquam in felis sit amet augue. 
 
    <h2>Page Content</h2> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
 
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
 
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
 
    Aliquam in felis sit amet augue. 
 
    <h2>Page Content</h2> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
 
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
 
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
 
    Aliquam in felis sit amet augue. 
 

 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <h2>Page Content</h2> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
 
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
 
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
 
    Aliquam in felis sit amet augue. 
 
    </div> 
 
</div> 
 

 
<hr> 
 

 
<div class="container"> 
 
\t <div class="row"> 
 
     <div class="col-md-12 text-center"><p>The End.</p></div> 
 
    </div> 
 
</div>

bootstrap_and_overrides.css

/* 
 
    =require twitter-bootstrap-static/bootstrap 
 

 
    Static version of css will use Glyphicons sprites by default 
 
    =require twitter-bootstrap-static/sprites 
 
*/ 
 
body { padding-top: 50px; } 
 

 
.bg { 
 
    background: url('protest.jpg') no-repeat center center; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 450px; /*same height as jumbotron */ 
 
    top:0; 
 
    left:0; 
 
    z-index: -1; 
 
} 
 

 
.jumbotron { 
 
    margin-bottom: 50px; 
 
    height: 350px; 
 
    color: white; 
 
    text-shadow: black 0.3em 0.3em 0.3em; 
 
    background:transparent; 
 
}

и cable.js

// Action Cable provides the framework to deal with WebSockets in Rails. 
 
// You can generate new channels where WebSocket features live using the rails generate channel command. 
 
// 
 
//= require action_cable 
 
//= require_self 
 
//= require_tree ./channels 
 

 
(function() { 
 
    this.App || (this.App = {}); 
 

 
    App.cable = ActionCable.createConsumer(); 
 

 
}).call(this); 
 

 
var jumboHeight = $('.jumbotron').outerHeight(); 
 
function parallax(){ 
 
    var scrolled = $(window).scrollTop(); 
 
    $('.bg').css('height', (jumboHeight-scrolled) + 'px'); 
 
} 
 

 
$(window).scroll(function(e){ 
 
    parallax(); 
 
});

Это изображение, прежде чем я прокрутить страницу:

Answer 1

Вы не должны поместить изображение в качестве фона в JumboTron, что не для чего он нужен.

Вместо этого сделайте прозрачный цвет фона jumbotron, затем добавьте фоновое изображение в div вне контейнера.

ie. в HAML

#YourDivToApplyBackground 
    .container 
     .row 
      .col-md-12 
       .jumbotron 
        %h1 Your Page Title 

Вот как ваш код должен искать бутстрап.