<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 ----------> <!-- header --> <header class="header"> <h2 class="caption">Summer Collection</h2> <!--free stock image --> <img src="http://www.pngall.com/wp-content/uploads/2016/05/Model-PNG-Picture.png" class="" alt=""> <button class="btn btn-light action">Call to Action</button> </header>

/*=== header ===*/ .header { z-index: 0; position: relative; min-width: 100vw; min-height: 95vh; background-color: #A4958E; } .header .caption { z-index: 1; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); text-align: center; color: #fff; font-weight: 200; font-size: 7rem; text-shadow: 1px 1px 1px #aaa; } .header img { z-index: 2; position: absolute; top: 0%; left: 50%; height: 100%; transform:translate(-50%, 0%); } .header .action { z-index: 3; position: absolute; top: 70%; left: 50%; transform:translate(-50%,-50%); text-align: center; padding-right: 25px; padding-left: 25px; }