Zero-Element Blueprint Paper CSS Background

script.js

/*To-Do
-Make gradients cross browser
http://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient
-Clean up :before and :after structure for both html and body
-Make every nth line 1px thicker, or less opaque(accomplished in gradient)
*/

 /*
  background: rgba(87,196,250,1);
  background: -moz-radial-gradient(center, ellipse cover, rgba(87,196,250,1) 0%, rgba(10,128,254,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(87,196,250,1)), color-stop(100%, rgba(10,128,254,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(87,196,250,1) 0%, rgba(10,128,254,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(87,196,250,1) 0%, rgba(10,128,254,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(87,196,250,1) 0%, rgba(10,128,254,1) 100%);
  background: radial-gradient(ellipse at center, rgba(87,196,250,1) 0%, rgba(10,128,254,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57c4fa', endColorstr='#0a80fe', GradientType=1 );
  */

style.css

html,body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}
html{
  background-color:#57c5fa;
  background:linear-gradient(#57c5fa,#0a81fe);
}
body:after{
  content:'';
  height:100%;
  width:100%;
  display:block;
  background-image:linear-gradient(90deg, rgba(255,255,255,.25) 1px, rgba(0,0,0,0) 1px), linear-gradient(0deg, rgba(255,255,255,.25) 1px, rgba(0,0,0,0) 1px);
  background-position:0px 1px;
  background-repeat:repeat;
  background-size:20px 20px;
}

/*optional*/
body{
  background: url(http://www.transparenttextures.com/patterns/handmade-paper.png);
  opacity:.75;
}
/*optional*/

zero-element-blueprint-paper-css-background.markdown

Zero-Element Blueprint Paper CSS Background

Blueprint graph paper made in CSS using no elements. Attaches background to html and body.

A Pen by Brant Holt on CodePen.

License.