<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css"> <section class="landingpage"> <div class="mt-landing"> <div class="col-md-6 col-sm-6 col-xs-12 front-img nopad" style="background-image: url('http://via.placeholder.com/1250x650');background-position: center center;background-size: cover"> <div class="overlay-1"> <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <a href="#" type="button" class="btn"> <span class="flag-icon flag-icon-rs"></span>SERBIAN </a> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12 front-img nopad" style="background-image: url('http://via.placeholder.com/1250x650');background-size: cover;background-position: center center"> <div class="overlay-2"> <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <a href="#" type="button" class="btn"> <span class="flag-icon flag-icon-rs"></span>SERBIAN </a> </div> </div> </div> </div> </section>

.mt-landing { width: 100%; text-align: center; position: absolute; } .mt-landing .nopad { margin: 0px !important; padding: 0px !important; } .mt-landing .front-img { height: 100vh; } .mt-landing .overlay-1 { position: absolute; width: 100%; height: 100%; background-color: rgba(57, 54, 54, 0.48); background-size: cover; background-position: center center; } .mt-landing .overlay-2 { height: 100%; position: absolute; width: 100%; background-color: rgba(57, 54, 54, 0.48); background-size: cover; background-position: center center; } .mt-landing .content { left: 0; position: relative; top: 30% } .mt-landing .content h1 { text-align: center; color: #fff; font-size: 2.5em; text-shadow: none; font-weight: 700; font-style: normal; letter-spacing: 3px; -webkit-font-smoothing: antialiased; } .mt-landing .content h2 { text-align: center; color: #fff; font-size: 1em; text-shadow: none; font-style: normal; letter-spacing: 3px; -webkit-font-smoothing: antialiased; } .mt-landing .content span { margin-right: 7px; text-align: center; font-size: 13px; } .mt-landing .content .btn { color: #fff; background-color: #241d4f; margin-top: 30px; cursor: pointer; font-size: 13px; font-weight: 700; font-family: Rubik; text-shadow: none; position: relative; text-align: center; font-style: normal; padding: 10px 25px; letter-spacing: 1px; text-decoration: none; -webkit-font-smoothing: antialiased; -webkit-border-radius: 0; border: 1px solid #fff; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; }