<div class="container">
  <div id="wrapper"></div>
  <h1>Everything starts here</h1>
</div>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #212121;
  
  #wrapper {
    width: 100vw;
    height: 100vh;
  }
  
  h1 {
    font-size: 100px;
    text-transform: uppercase;
    font-family: Helvetica;
    color: white;
    position: absolute;
    z-index: 0;
  }
}
View Compiled
var options = {
         animate: true,
         patternWidth: 100,
         patternHeight: 100,
         grainOpacity: 0.05,
         grainDensity: 1,
         grainWidth: 1,
         grainHeight: 1
 };

grained('#wrapper', options);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. http://sarathsaleem.github.io/grained/grained.min.js