Image banner above Twitter bootstrap header
31,276
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/
Author by
Kern Elliott
Young I.T professional. Now learning how to develop web apps using HTML5 CSS Javascript and phonegap
Updated on July 05, 2020Comments
-
Kern Elliott almost 4 years
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"><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>
CSS
.masthead img{ width:100%; }
-
Kern Elliott over 10 yearsstill appears under the header not really below it.
-
Citizen almost 10 yearsFriends don't let friends skip leg day.