Bootstrap Full Height Background Cover Image

cover, height, image, twitter-bootstrap

Solution

Do you mean like this demo ?

If yes try this code :

CSS CODE

.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 CODE :

<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>

Problem

I am currently designing a site using Bootstrap and am trying to include a full height background cover image like on this site: http://lewisking.net/. This is my code: 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%; } ``` However, I can't see to get the image to cover the entire "above the fold" section. The image just go as height as the text in the header. Any idea what I am doing wrong?

Original source