<!-- This code snippet uses the basscss framework -->
<header class=" hero center px3 py4 white">
  <h1 class="h1 h0-responsive mt4 mb0 regular">The Perfect Hero Image</h1>
  <p class="h3">Resizes with the browser</p>
</header>

.hero{	
display:block;
width:100%;
height:100vh;
background-image: url(http://graphicburger.com/preview/html-templates/outline/images/bg_2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

}

.hero h1{
 font-family:Myriad Pro;
 color:#FFF;
}

External CSS

  1. https://d2v52k3cl9vedd.cloudfront.net/basscss/7.0.4/basscss.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.