"Bootstrap Image Header - TOP"
Bootstrap 3.1.0 Snippet by lite20

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="http://getbootstrap.com/assets/ico/favicon.ico"> <title>Image Header Template for Bootstrap</title> <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="./bootstrap/css/header.css" rel="stylesheet"> </head> <body class="body-top"> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="header-top"> <div class="container"> <h1 class="header-text">Website Name</h1> </div> </div> <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="#">Project Name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li><a href="#about"><span class="glyphicon glyphicon-info-sign"></span> About</a></li> <li><a href="#contact"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li> </ul> </div> </div> </div> <div class="container"> <div class="jumbotron"> <h1>Bootstrap header template</h1> <p class="lead">Use this document as a way to quickly start any new project with a beautiful image header.<br> All you get is this text, a navbar, a header, and a mostly barebones HTML document.</p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="./dist/js/bootstrap.min.js"></script> </body> </html>
.body-top { padding-top: 240px; } .body-bottom { padding-top: 60px; } .header { background-image: url('http://www.up-downbikes.it/images/Cool-Designs-HD-Wallpaper.jpg'); background-size: cover; padding-top: 100px; } .header-top { background-image: url('http://www.up-downbikes.it/images/Cool-Designs-HD-Wallpaper.jpg'); background-size: cover; padding-top: 100px; } .header-bottom{ background-image: url('http://www.up-downbikes.it/images/Cool-Designs-HD-Wallpaper.jpg'); background-size: cover; padding-top: 100px; margin-bottom: 30px; } .header-text { margin-bottom: 0px; color: white; }

Related: See More

Datepicker
Image Crop jQuery
Resize & Fixed Header (shrinking header)
Image Checkbox

Questions / Comments: