<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);
This Pen doesn't use any external CSS resources.