CSS Checkered pattern that can be used on all modern browsers.

checkered.css

body {
    background-image:
      linear-gradient(45deg, #ccc 25%, transparent 25%), 
      linear-gradient(135deg, #ccc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ccc 75%),
      linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size:25px 25px; /* Must be a square */
    background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
}

this approach is still really good and helps when IE11 compatibility is necessary!

In Firefox it creates a faint white line diagonally through some of the squares. It comes and goes when scaling, but also present on 100%. It seems to be better on non retina screens.

@GarthDB changing the background size to an even number appears to fix the "faint white line" display issue.