<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="banner-img3 text-white py-5"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h3>Free HTML Bootstrap 4 Tab Template - Mobirise</h3> </div> </div> <div class="pb-3"></div> <div class="row"> <div class="col-md-12"> search box here </div> </div> </div> </section>

.banner-img3 { background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("https://images.pexels.com/photos/36464/sky-clouds-clouds-form-cumulus-clouds.jpg?auto=compress&cs=tinysrgb&h=650&w=940"); background-repeat: no-repeat;background-size: cover;background-position: center center; }