Baseline CSS: Graph paper like background for easier alignment of elements

baseline-css

html { 
    font-size: 93.8%;    
    background-color: #f1f2f3; 
    background-image: 
      -webkit-linear-gradient(0deg, transparent .05em, rgba(0,0,0,.05) .05em, rgba(0,0,0,.05) .125000em, transparent .125000em),
      -webkit-linear-gradient(rgba(0,0,0,.05) .062500em, transparent .062500em);
    background-image: 
      -moz-linear-gradient(0deg, transparent .05em, rgba(0,0,0,.05) .05em, rgba(0,0,0,.05) .125000em, transparent .125000em),
      -moz-linear-gradient(rgba(0,0,0,.05) .062500em, transparent .062500em);
    background-image: 
      -ms-linear-gradient(0deg, transparent .05em, rgba(0,0,0,.05) .05em, rgba(0,0,0,.05) .125000em, transparent .125000em),
      -ms-linear-gradient(rgba(0,0,0,.05) .062500em, transparent .062500em);
    background-image: 
      -o-linear-gradient(0deg, transparent .05em, rgba(0,0,0,.05) .05em, rgba(0,0,0,.05) .125000em, transparent .125000em),
      -o-linear-gradient(rgba(0,0,0,.05) .062500em, transparent .062500em);
    background-image: 
      linear-gradient(0deg, transparent .05em, rgba(0,0,0,.05) .05em, rgba(0,0,0,.05) .125000em, transparent .125000em),
      inear-gradient(rgba(0,0,0,.05) .062500em, transparent .062500em);
    background-size: .75em .75em;  
    background-position: 0 -0.5em; 
}


@media screen and (min-width: 600px) { 
    html { 
        font-size: 100%; 
    }
}


@media screen and (min-width: 800px) { 
    html { 
        font-size: 125%; 
    }
}

Did exactly what I was after, apart from being a little too faint, but that's easy to change - thanks!