JSFiddle - React, Tailwind, and code Playground

by Bavc Am

HTML

<div id="top" class="header">
      <div class="vert-text">
        <h1>Background:cover example</h1>
        <h3><em>How</em> You Accomplish It Is As Important As <em>Why</em> You Endeavor To Accomplish It</h3>
      </div>
    </div>
<p>Some extra text as a placeholder. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum at augue non tristique. Ut a semper risus, in commodo ipsum.</p>
<p>Proin odio urna, ornare a molestie nec, mattis vitae felis. Ut faucibus, ligula a egestas varius, nulla eros iaculis mauris, vel sodales elit felis ac lectus. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu consectetur purus. Duis in nisi dolor. In et est mauris. Integer fermentum nisi ligula, quis venenatis libero laoreet nec. </p>

CSS

html,
body {
  height: 100%;
  width: 100%;
}

/* Full Page Image Header Area */

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  background: url(http://placehold.it/800x800.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.vert-text {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* Responsive */

@media (max-width: 768px) {
	
  .header {
	background: url(http://placehold.it/800x800.png) no-repeat center center scroll; 
  }
}