Bootstrap snippet: header banner with background

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: banner



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="head-bg"> <div class="head-bg-img"></div> <div class="head-bg-content"> <h1>Your Best Social Network Template</h1> <p>Donec in rhoncus tortor. Sed tristique auctor ligula vel viverra</p> <a class="btn btn-primary btn-lg"><i class="fa fa-facebook"></i>sign up via facebook</a> <a class="btn btn-default btn-lg"><i class="fa fa-lock"></i>sign up now</a> </div> </div>
body{margin-top:20px;} .head-bg { background: #000; position: relative; padding: 10px; margin-bottom: 50px; } .head-bg-img { position: absolute; left: 0; top: 0; background: url(http://demo.nrgthemes.com/projects/nrgnetwork/img/bg.jpg); height: 100%; width: 100%; background-size: cover; opacity: 0.2; z-index: 1; background-position: center center; } .head-bg-content { height: 400px; text-align: center; position: relative; z-index: 200; display: table-cell; vertical-align: middle; width: 5000px; } .head-bg-content h1 { font-size: 32px; line-height: 40px; color: #FFF; font-family: 'Conv_helveticaneuecyr-bold'; margin-bottom: 17px; } .head-bg-content p { color: #a1a4af; margin-bottom: 25px; } .head-bg-content .btn i { font-size: 14px; line-height: 12px; font-weight: 700; } .btn .fa { margin-right: 10px; }
Dey-Dey

header banner with background

Dey-Dey
  Oct 15th, 00:10
27 Views