"background animate"
Bootstrap 3.0.0 Snippet by karimsharf12252

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <head> <link rel="stylesheet" href="css/animate.css"> </head> <header class="business-header bg-overlay "> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12 text-center"> </div> </div> <div class="header holder animate bounceInRight"> <div class="detalis holder"> <h2>JOIN US TODAY</h2> </div> <div class="detalis"> <h2>GET A 5 DAYS FREE PASS</h2> </div> <div class="hr-title-holder"> <div class="hr-title"> <hr> </div> </div> <div class="detalis header"> <p>Duis convallis vel urna et vestibulum. Suspendisse gravida lacinia tellus in rhoncus. Proin rutrum pulvinar nulla, ut sollicitudin lectus imperdiet vitae. Pellentesque portabi neque nisi.</p> </div> </div> </header>
.bg-overlay { height: 550px; background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)),url('file:///C:/Users/NewVision/Desktop/new%20project/img/what.jpg') center center no-repeat scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .header.holder { position: absolute; top: 122px; color: white; } .detalis.holder h2 { font-size: 19px; color: #D4145A; font-weight: 400; font-size: 20px; font-family: electrolize, sans-serif; line-height: 3px; } .hr-title hr { border: 2px solid #d4145a; width: 58px; float: left; border-radius: 21px; margin-top: 2px; } .detalis.header p { position: absolute; top: 96px; font-size: 18px; line-height: 32px; color: #B8B8B8; font-weight: 400; font-family: sans-serif; word-spacing: 7px; letter-spacing: 1px; } .header.holder.animate.bounceInRight { -webkit-animation-duration: 1s; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: unset; }

Related: See More

Paper Kit
Social Login Page with CSS Background
Call to action with dark background
Glyphicon Animate, Rotation and Flip

Questions / Comments: