<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="banner-breadcum section"> <div class="row"> <div class="breadcrumb-image" style="background-image: url(https://images.pexels.com/photos/544117/pexels-photo-544117.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);"> <div class="container text-center"> <h1>Frequently asked questions</h1> <div class="breadcrumbs_path"> <a href="#">Home</a>  -   FAQ's </div> </div> </div> </div> </div>

.breadcrumb-image { background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 104px 0 110px; position: relative; width:100%; } .breadcrumb-image::before { background: rgba(0, 0, 0, 0.80) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; } .breadcrumb-image h1 { color: #ffffff; font-size: 33px; font-weight: 600; line-height: 40px; position: relative; text-transform: uppercase; } .breadcrumbs_path { color: #fff; margin-top: 8px; position: relative; z-index: 9; } .breadcrumbs_path > a { color: #fff; transition: all 0.3s ease 0s; }