<!-- 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;
}
This Pen doesn't use any external JavaScript resources.