2014-01-15 4 views
3

내 부트 스트랩 페이지 위에 배너를 갖고 싶습니다. 내 코드는 배경으로 CSS 이미지 배너 위의 트위터 부트 스트랩 헤더

<div class="masthead"> 
    <img src="images/gov-header.jpg"/> 
</div> 
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">MST</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="index.html">Home</a></li> 
     <li><a href="content.html">Divisions</a></li> 
     <li><a href="#projects">Projects</a></li> 
     <li><a href="#faqs">FAQs</a></li> 
     <li><a href="#resources">Resources</a></li> 
     <li><a href="#contact">Contact Us</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 

HTML

아래

.masthead img{ 
    width:100%; 
} 
+0

가 대신 배경 확인 바이올린을 참조 높이에 마스트 헤드의 높이를 변경해야 이미지의 – unekwu

+0

사용

답변

6

그것의 더 나은입니다.

.masthead{ 
    height://height of bg; 
    background-image:url("../images/gov-header.jpg"); 
    background-repeat:no-repeat; 
} 

희망 사항을 알려주십시오. 너비 전체 또는 컨테이너 길이를 채우고 싶은지에 따라이 값을 수정할 수 있습니다.

업데이트 당신은

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 

<div class="navbar navbar-inverse" role="navigation"> 

하려면 http://jsfiddle.net/NK6nh/3/

+0

이 계속 표시된 후 동일한 div에 마스트 헤드를 넣으십시오. –

+0

내 대답을 업데이트했습니다 – unekwu

+5

친구들이 다리를 건너 뛰게하지 마십시오. – Citizen