<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container-fluid"> <div class="parallax-div"> <h1 class="parallax-text"> Do what <br/>makes <br/>you happy </h1> </div> </div>

.parallax-div { height: 500px; background: url("http://res.cloudinary.com/tempest/image/upload/c_limit,cs_srgb,dpr_1.0,q_80,w_10000/MTMwOTgxMTI5NDk3OTA5NzI2.jpg"); background-size: cover; background-attachement: fixed; } .parallax-text { overflow: hidden; background: #fff; color: #3a3a3a; font-size: 86px; line-height: 86px; font-weight: 700; text-transform: uppercase; mix-blend-mode: lighten; margin-top: 50px; height: 500px; }