<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 ----------> <div class="container"> <div class="row"> <div class="image-item"> <div class="full-screen-image"> <div class="bg-full-image"> </div> <div class="overlay"></div> <div class="hero-title"> <div class="hr-text"> <h3>RC HOMEOPATHY CLINIC</h3> <span class="bold-separator"></span> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div>

.image-item{ position: relative; min-height: 1px; height: 100%; width: 1349px; margin-right: 0px; } .full-screen-image{ position: relative; height: 352px; } .bg-full-image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-image: url(https://www.rchomeopathy.com.au/wp-content/uploads/2017/08/homeopathy_4.jpg); background-size: cover; background-attachment: scroll; background-position: center; background-repeat: repeat; background-origin: content-box; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #292929; opacity: .3; z-index: 2; } .overlay { background: url(https://www.rchomeopathy.com.au/wp-content/themes/kvest-child/../kvest/includes/images/pattern2.png) repeat!important; opacity: 0.2 !important; }