<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 ----------> <section id="Scta" class="section_padding30" style="background-image: url(https://images.pexels.com/photos/189092/pexels-photo-189092.jpeg?w=940&h=650&auto=compress&cs=tinysrgb); background-size: cover; background-position: 0% -12.7282px;"> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-9 Scta-box"> <div class="Scta-title">Buy Handcrafted design</div> </div> <!-- End Col --> <div class="col-sm-12 col-md-3 Scta-box "> <button type="button" class="btn btn-primary site-btn">Primary</button> </div> </div> </div> </section> <div class="bg-img paddingTB60"></div>

.paddingTB60 { padding-top:260px; padding-bottom:260px; } .bg-img { width: 100%; height: 100%; background: url('http://unsplash.it/1200x800') center center no-repeat; background-size: cover; &:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right,#002f4b,#dc4225); opacity: .6; } } #Scta { position: relative; } .section_padding30 { padding: 30px 0; } .Scta-box { color: #fff; } .Scta-title { font-size: 42px; font-weight: bold; display: block; margin-bottom: 30px; } .Scta-box h4 { font-weight: 400; font-size: 18px; color: #ffffff; font-family: 'Lato', sans-serif; } .icon-s { color : #fe4819; padding:32px; font-size:50px; }