<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.