header banner with background

This bootstrap snippet called "header banner with background" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: banner

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Oct 15th 2016, 00:10

Views: 277