Image banner above Twitter bootstrap header - html

Question

I would like to have a banner above my bootstrap page. My code is below
HTML
<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">Home</li>
<li>Divisions</li>
<li>Projects</li>
<li>FAQs</li>
<li>Resources</li>
<li>Contact Us</li>
</ul>
</div><!--/.nav-collapse -->
</div>
CSS
.masthead img{
width:100%;
}

Answer 1

Its better as a background.
.masthead{
height://height of bg;
background-image:url("../images/gov-header.jpg");
background-repeat:no-repeat;
}
Hope this gives you some ideas. You can modify this depending on if you want to fill the whole width or just container length.
Update
You have to change
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
to
<div class="navbar navbar-inverse" role="navigation">
See the fiddle http://jsfiddle.net/NK6nh/3/