<div class="gingham"></div>
<div class="grid"></div>
<div class="blueprint"></div>
<div class="polka-dot"></div>
<div class="checker-board"></div>
<div class="svg-checker-board"></div>

div {
  height: 20em;
  width: 33%;
  display: inline-block;
}

.gingham {
  background: white;
  background-image: 
    linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0), 
    linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
  background-size: 30px 30px;
}

.grid {
  background: #58a;
  background-image:
    linear-gradient(white 1px, transparent 0),
    linear-gradient(90deg, white 1px, transparent 0);
  background-size: 30px 30px;
}

.blueprint {
  background: #58a;
  background-image:
    linear-gradient(white 2px, transparent 0),
    linear-gradient(90deg, white 2px, transparent 0),
    linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
    linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
  background-size:  75px 75px, 75px 75px,
                    15px 15px, 15px 15px;
}

.polka-dot {
  background: #655;
  background-image: 
    radial-gradient(tan 30%, transparent 0),
    radial-gradient(tan 30%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

.checker-board {
  background: #eee;
  background-image:
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0);
  background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
  background-size: 30px 30px;
}

.svg-checker-board {
  background: #eee url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" \
      width="100" height="100" fill-opacity=".25" > \
    <rect x="50" width="50" height="50" /> \
    <rect y="50" width="50" height="50" /> \
</svg>');
  background-size: 30px 30px;
}