<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 ----------> <div class="image-aboutus-banner"style="margin-top:70px"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="lg-text">About Us</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div> <div class="image-aboutus-sm-banner"style="margin-top:70px"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1 class="lg-text">About Us</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div>

.image-aboutus-banner { background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("https://images.pexels.com/photos/673649/pexels-photo-673649.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"); background-repeat: no-repeat; background-size: cover; background-position: center center; color: #fff; padding-top: 110px; padding-bottom:110px; } .image-aboutus-sm-banner { background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("https://images.pexels.com/photos/631008/pexels-photo-631008.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"); background-repeat: no-repeat; background-size: cover; background-position: center center; color: #fff; padding-top: 20px; padding-bottom:20px; } .lg-text { font-size:52px; font-weight: 600; text-transform: none; color:#fff; } .image-aboutus-sm-banner p { color:#fff; }