Фоновое изображение полной высоты Bootstrap

Question

В настоящее время я разрабатываю сайт с использованием Bootstrap и пытаюсь добавить полноразмерное фоновое изображение, как на этом сайте: http://lewisking.net/.

Это мой код:

HTML

<header class="title">

<div class="cut">
<img src="" height="">
</div>


<h2>Vintage Boutique Based in New York</h2>

<nav>
<ul>
<li><a href="#portfolio">SHOP</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">PRESS</a></li>
</ul>
</nav>


</header>

CSS

header { 

  background: url(../img/nycfull.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.cut img {
max-width: 100%;
height: auto;
max-height: 100%;
}

Однако я не вижу, чтобы изображение покрывало весь раздел "выше сгиба". Изображение просто соответствует высоте текста в заголовке. Есть идеи, что я делаю не так?

Answer 1

Вы имеете в виду, как это демо?

Если да, попробуйте этот код:

CSS-код

.cover{
    color: rgb(255, 255, 255);
    position: relative;
    min-height: 350px;
    background: url("http://lewisking.net/images/header-image.jpg") no-repeat scroll 0px 100% / cover transparent;
}

nav ul li {
  list-style:none;
  float:left;
  margin-right:50px;

}

HTML-код:

<div class="cover">
  <div class="clearfix"></div>
   <nav>
    <ul>
    <li><a href="#portfolio">SHOP</a></li>
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#contact">PRESS</a></li>
    </ul>

  </nav>

</div>

Answer 2

Ваша навигация и заголовок не должны быть вместе! Используйте свой заголовок, чтобы отобразить начальный раздел для вашего сайта (то, что люди видят, когда они попадают на вашу страницу). Добавьте позиции в вашу навигацию, чтобы исправить это, где вы хотите вместо этого.

CSS-код для обложки полной высоты:

header {
background-image: url(background-img.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
min-height: /*enter value here*/;
}

В своем HTML вы должны закодировать <nav> navbar html here </nav> сначала, а потом ваш <header> header html here </header>,

Если вы кодируете свой сайт, чтобы он был готов для мобильных устройств, прочитайте это руководство, чтобы реализовать исправление рабочего изображения обложки: CSS background-size: cover - Как заставить его работать для мобильных устройств / iOS