2014-11-12 4 views
0

내 navbar의 패딩 상단과 하단이 70px입니다. 높이 현명한 그것은 평소보다 더 큰 navbar입니다. 나는이 전체 공간을 내 navbar의 배경으로 채우기 위해 사진을 사용하려하지만 중간 바로 아래의 매우 작은 공간 만 채우고 나머지 navbar는 흰색으로 유지됩니다. 내 탐색 바의 전체 공간을 내 사진으로 채우려면 어떻게해야합니까?navbar의 배경 이미지가 올바르게 맞지 않음

.navbar { 
 
\t text-transform: uppercase; 
 
\t margin-bottom: 0px; 
 
} 
 

 
.navbar-inner{ 
 
    background-image: url('../img/mixer.jpg'); 
 
    background-repeat: repeat-x; 
 
} 
 

 
.navbar-default { 
 
\t padding-top: 70px; 
 
\t padding-bottom: 70px; 
 
\t border-color: #1E1E20; /*light black*/ 
 
} 
 

 
.navbar-brand { 
 
\t font-weight: 700; 
 
\t font-size: 20px; 
 
\t letter-spacing: 2px; 
 
} 
 

 
ul.nav a { 
 
\t color: #1abc9c !important; /*teal*/ 
 
} 
 

 
ul.nav a:hover, 
 
ul.nav a:focus { 
 
\t color: #7b7b7b !important; /*lightest grey*/ 
 
} 
 

 
.navbar-default .navbar-toggle { 
 
\t border-color: transparent; 
 
}
<div class="navbar navbar-default navbar-static-top" role="navigation"> 
 
\t \t \t <div class="navbar-inner"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t </button> 
 
\t \t \t \t \t <a href="index.html" class="navbar-brand">KEN COOPER</a> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="collapse navbar-collapse"> 
 
\t \t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t \t \t <li><a href="#">About</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Shows</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Clients</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Contact</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> <!-- end navar collapse --> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

답변

0
.navbar { 
    text-transform: uppercase; 
    margin-bottom: 0px; 
     background: url('http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

근무 바이올린 http://jsfiddle.net/52VtD/8979/

관련 문제