Bootstrap Full Height Hintergrundbild Bild

Question

Ich entwerfe gerade eine Seite mit Bootstrap und versuche, ein Hintergrundbild voller Höhe wie auf dieser Seite einzufügen: http://lewisking.net/.

Dies ist mein 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%; 
} 

Allerdings kann ich nicht das Bild zu erhalten sehen, um die gesamte "above the fold" abzudecken Abschnitt . Das Bild wird nur so hoch wie der Text in der Kopfzeile. Irgendeine Idee, was ich falsch mache?

Answer 1

Meinst du so demo?

Wenn ja versuchen, diesen 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> 

Answer 2

Ihr nav und Header sollte nicht zusammen sein! Verwenden Sie Ihre Kopfzeile, um Ihren ersten Abschnitt für Ihre Website anzuzeigen (was Nutzer sehen, wenn sie auf Ihrer Seite landen). Fügen Sie Ihrem Navigationssystem Positionen hinzu, um es dort zu fixieren, wo Sie es möchten.

CSS-Code für ein volles Höhe Titelbild:

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 Ihrem HTML, sollten Sie Ihre <nav> navbar html here </nav> ersten Code, und Ihre <header> header html here </header> dann.

Wenn Sie Ihre Website-Codierung Mobil bereit sein, lesen Sie dieses Tutorial eine Arbeitsabdeckung Bild fix zu implementieren: CSS background-size: cover – Making it work for mobile/iOS