<p>ドット基本</p>
<div class="box bg_dot"></div>

<p>ドット大</p>
<div class="box bg_dot is-large"></div>

<p>ドット小</p>
<div class="box bg_dot is-small"></div>

<p>ダイヤ</p>
<div class="box bg_dot is-dia"></div>

.box{
  width:100%;
  height:200px;
}

/* ドット基本 */
.bg_dot{
  background-color: #fff;
  background-image:
    radial-gradient(#7bded9 30%, transparent 30%);
  background-size: 20px 20px;
}

/* ドット大 */
.is-large{
  background-image:
    radial-gradient(#7bded9 50%, transparent 50%);
}

/* ドット小 */
.is-small{
  background-image:
    radial-gradient(#888 10%, transparent 10%);
}

/* ダイヤ */
.is-dia{
  background-image:
    radial-gradient(#ff9797 76%, transparent 76%);
}