Bootstrap Jumbotron Фоновое изображение не реагирует

Я довольно новичок в бутстрапе и с трудом пытаюсь получить изображение моего jumbotron для правильного масштабирования, не показывая белый фон. Я использую Bootstrap Fixed Nav в верхней части страницы, Jumbotron (изображение bg) посередине и Sticky Footer. Когда я тестирую в google chrome, чтобы увидеть, правилен ли макет, кажется, что изображение не растягивается до верхней части нижнего колонтитула, что показывает белый фон. Как я могу правильно настроить фоновое изображение для всех устройств?Bootstrap Jumbotron Фоновое изображение не реагирует

HTML:

<!-- Fixed navbar --> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html">Jason<span>Murray</span></a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="index.html">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Portfolio</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 

    <div class="jumbotron"> 
     <div class="container"> 
     <h1 class="text-center">Front-End Web Developer</h1> 
     <p class="text-center">I'm Jason Murray, Front-End Web Developer who loves to write clean codes and build simplistic web designs.</p> 
     <p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button">Recent Work</a></p> 
     </div> 
    </div> 

    <footer class="footer"> 
     <div class="container"> 
     <p class="text-center">Copyright &copy; 2016 <a href="index.html" target="_blank">Jason Murray Web Design</a>. All Rights Reserved</p> 
     </div> 
    </footer> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html> 

CSS: 

.jumbotron { 
    background: url("../img/lucho-49.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
}

источник

2016-08-06 Jason Murray

Существует запас снизу этого jumbotron класса, так что удалить margin:

.jumbotron { 
    margin-bottom: 0; 
}

Вот скрипка: fiddle link

источник

2016-08-06 21:19:32

Hi Teuta! Спасибо, что ответили! К сожалению, это тоже не сработало. Кажется, что мое фоновое изображение не показывает полную высоту. –

@JasonMurray, исходя из ваших потребностей, вы сказали, что для удаления этого пробела поверх нижнего колонтитула, правильно? Что еще вы пытаетесь сделать? –

@JasonMurray, еще раз проверьте мою обновленную ссылку на скрипку! –

Изображение не растягивается вниз до верхней части нижнего колонтитула из-за предопределенного свойства jumbotron margin-b ottom: 30px;.

В коде CSS сделать следующие изменения:

nav + .jumbotron { 
    margin-bottom: 0; 
    background: url("../img/lucho-49.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
}

Если добавить краю дна: 0; в вашем селекторе .jumbotron не будет работать из-за специфики. Следовательно, я увеличил специфичность, добавив Смежный селектор, навигатор + .jumbotron, чтобы переопределить ваши свойства CSS с заданными свойствами CSS. Jumbroton bootstrap.

источник

2016-08-06 22:04:30

Bootstrap Jumbotron Фоновое изображение не реагирует

ответ

Смежные вопросы