I wanted to get used to the CSS3 gradient syntax, and I figured a good start would be creating a lined paper background, just like back in school.

So of course my first step was to google it. After finding some results I was not completely happy with, I adjusted it until I got a much better effect, in my own opinion of course.

For cross browser support I used Prefixr.com, obviously this will not work in older browsers such as IE6. I recommend using Chrome, Firefox or Safari to view the demo.

body {
    /* Begin The Redundancies */
    background-image: 
      -webkit-linear-gradient(0deg, transparent 5em, rgba(255,0,0,.2) 0, transparent 5.1em),
      -webkit-linear-gradient(rgba(0,0,255,.3) 1px, transparent 0);
    background-image: 
      -moz-linear-gradient(0deg, transparent 5em, rgba(255,0,0,.2) 0, transparent 5.1em),
      -moz-linear-gradient(rgba(0,0,255,.3) 1px, transparent 0);
    background-image: 
      -o-linear-gradient(0deg, transparent 5em, rgba(255,0,0,.2) 0, transparent 5.1em), 
      -o-linear-gradient(rgba(0,0,255,.3) 1px, transparent 0);
    background-image: 
      -ms-linear-gradient(0deg, transparent 5em, rgba(255,0,0,.2) 0, transparent 5.1em), 
      -ms-linear-gradient(rgba(0,0,255,.3) 1px, transparent 0);
    -webkit-background-size: 100% 2em;
    -moz-background-size: 100% 2em;
    
    /* In a perfect world... */
    background-image: 
      linear-gradient(0deg, transparent 5em, rgba(255,0,0,.2) 0, transparent 5.1em), 
      linear-gradient(rgba(0,0,255,.3) 1px, transparent 0);
    background-size: 100% 2em;
}