부트 스트랩 전체 높이 배경 표지 이미지

Question

현재 부트 스트랩을 사용하여 사이트를 디자인 중이며이 사이트와 같은 전체 높이의 배경 표지 이미지를 포함하려고합니다 : http://lewisking.net/.

<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%; 
} 

, 나는 "이 배 위의"전체를 커버하는 이미지를 얻을 볼 수 없습니다

HTML 섹션 :

이

내 코드입니다 . 이미지는 머리글의 텍스트만큼 높이가 있습니다. 내가 뭘 잘못하고 있는거야?

Answer 1

이런 뜻입니까? demo?

예이 코드를 시도 할 경우 :

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 코드 : 당신의 HTML에서

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

, 당신은 다음 <header> header html here </header> 당신을 당신의 <nav> navbar html here </nav> 첫 번째 코드 및합니다. 모바일 - 준비가 귀하의 사이트를 코딩하는 경우

는 작업 표지 이미지 수정을 구현하기 위해이 튜토리얼을 읽어 CSS background-size: cover – Making it work for mobile/iOS이