<div class="info">You can make blurry background patterns by creating a very small base64 image at <a href="http://www.patternify.com/">patternify.com</a>, setting it as your background-image and scaling it up with CSS background-size. This is a 2x2 square. Very little CSS.</div>
body {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGElEQVQYV2M8w8Dw34SBgZGRAQRmMvwHACEjA5uO6tUuAAAAAElFTkSuQmCC);
background-size:50vmin;
font-size:1.5em;
margin:0;
}
.info {
background-color:rgba(255,255,255,.5);
margin:5vmin;
padding:5vmin;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.