CSS3 Grid Background

100% CSS with vendor prefixes and fall back base64 png background-image. Grid scrolls with page as mask stays put, giving the page a really neat look.

HTML

<h1>CSS3 Grid Background</h1>
<h2>100% CSS with vendor prefixes and fall back base64 png background-image. Grid scrolls with page as mask stays put, giving the page a really neat look.</h2>
<h3>Created by <a href="https://twitter.com/#!/thejameskyle/" target="_blank">James Kyle</a></h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium gravida auctor. Integer non quam quis erat rhoncus hendrerit quis in lacus. Maecenas tempus tortor quis dui aliquet ut congue enim sagittis. Pellentesque porta tincidunt orci, sit amet scelerisque odio feugiat non. Pellentesque nisl dolor, viverra ac scelerisque tincidunt, placerat ac nibh. Mauris at diam vitae nulla fermentum imperdiet. Fusce a dapibus nunc. Fusce pulvinar tempus ipsum vel imperdiet. Morbi sed massa velit, tempor scelerisque nisl.</p>

<p>Curabitur molestie vestibulum purus. Aliquam nec dui ante, eu sollicitudin mauris. In vel turpis vel quam egestas semper vel non orci. Etiam scelerisque luctus tortor id eleifend. Maecenas aliquam orci neque, a lacinia erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam aliquam, lacus dignissim luctus rutrum, felis urna vestibulum velit, vel ullamcorper nibh mauris et massa. Suspendisse lobortis elit at sem malesuada volutpat.</p>

<p>Aliquam fringilla congue nisl ut pellentesque. Aliquam lacus nisi, pharetra sed mattis ac, venenatis sit amet tellus. Phasellus commodo ultrices elit, id pellentesque nisl tristique ac. Etiam sit amet purus non nulla ornare lobortis. Fusce consectetur laoreet nisl sit amet viverra. Mauris massa libero, mollis sed pulvinar vel, lacinia non purus. Phasellus ultricies urna nec augue imperdiet elementum. Sed fringilla diam in turpis accumsan vitae semper justo placerat. Integer a libero dolor. Etiam ut lacus vel libero pulvinar elementum sit amet vitae nisi. Aliquam commodo nisi eu risus rutrum nec eleifend risus facilisis. Nullam eget leo mauris. Vivamus consequat dolor quis enim...

CSS

html{font-size: 87.5%}body{width:80%;max-width:900px;min-width:320px;margin:0 auto;padding:7.5% 20px;font:1em/1.5em "Helvetica Neue", Helvetica, Arial, sans-serif;color:rgba(0,0,0,0.9);text-shadow: rgba(255,255,255,0.25) 0 1px 1px}h1,h2,h3{text-align:center;line-height:1em}h1{margin-bottom:0.2em;font-weight:100;font-size:4em}h2{margin:0 auto 0.7em;font-weight:400;font-size:1.6em;line-height:1.2em;max-width:800px}h3{margin-bottom:0.3em;font-weight:200;font-size:1.2em}a{color:#36C;text-decoration:none}a:hover{text-decoration: underline}@media(max-width: 480px){h1{font-size:2em}h2{font-size:1.2em}}p{margin:1.5em 0;text-align: justify}.bold{font-weight:900}

/* COPY BELOW HERE */

.background-grid-pattern {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAEyBAMAAACIVtqyAAAALVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///8AAAAAAAAAAAAMxR3lAAAAD3RSTlMABw0BAwUCBgsEDAAKCQiHWYRhAAABCElEQVR4Xu3YP27CMBjGYR8h3ID2BJF6AQ+oc5bulioxe+AAjB09ICS2jlWnHIGNlSOwcgvMn+2T4HMIECe/d3qHR5aXV5Zs3kYJMWNzSaEofdZoNNtpqNHo95SwBjSadweNZjvP1mg020Gj2Q4azV8BGs27k7dGo9kOGs120Gi246X+VSCV9q1pryiD1ej/mL8fTSJ86E3mA9WVKE/WlaIMRK+T9OYrIYlnSx1EyVUHqUP7etthbUXJVVuprUbvV6csJtdzVmaXcnaHdPEa7TTa9VB7hXZSu7z0bBLzOb2do2vvJqXUlUQKjS6lLjU63KnRyziL7w9NIkw827ala42uG2k0um6mD1I/iTxORroSAAAAAElFTkSuQmCC);
  
  background-image: url(),
    -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%),
    -webkit-linear-gradient(left,
      rgba(0,0,0,0.06)  0%, rgba(0,0,0,0.06) 1.111111111%, transparent 1.111111111%, transparent 20%,
      rgba(0,0,0,0.03) 20%, rgba(0,0,0,0.03) 21.11111111%, transparent 21.11111111%, transparent 40%,
      rgba(0,0,0,0.03) 40%, rgba(0,0,0,0.03) 41.11111111%, transparent 41.11111111%, transparent 60%,
      rgba(0,0,0,0.03) 60%, rgba(0,0,0,0.03) 61.11111111%, transparent 61.11111111%, transparent 80%,
      rgba(0,0,0,0.03) 80%, rgba(0,0,0,0.03) 81.11111111%, transparent 81.11111111%, transparent 100%),
   ...