Bootstrap Full Height Background Cover Image

Question

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?

Solution 1

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>

Solution 2

Your nav and header should not be together! Use your header to display your initial section for your site (what people see when they land on your page). Add positions to your nav to fix it where you want instead.

CSS code for a full height cover image:

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*/;
}

In your HTML, you should code your <nav> navbar html here </nav> first, and then your <header> header html here </header>.

If you are coding your site to be mobile-ready, read this tutorial to implement a working cover image fix: CSS background-size: cover – Making it work for mobile / iOS

Comments

[Admin]

Yes, that demo is exactly what I meant. Thanks!

[CristiC777]

@jayden change the link of background: url() , and works :)

[Jayden Lawson]

Thanks @CristiC777