background-imageプロパティのradial-gradientで水玉模様を作成します。わかりやすいように背景を繰り返し前と繰り返し後で比較します。
デモページはこちら

radial-gradientは以下のように指定します。開始色（中央）から終了色（外側）へのグラデーションになります。

background-image: radial-gradient(円の形状, at 円の中心位置(X軸) 円の中心位置(Y軸), 開始色 経由点, 終了色 経由点);

初期値は以下の通りです。

background-image: radial-gradient(ellipse, at center, 開始色 0, 終了色 100%);

共通のCSSは以下になります。水玉模様はdivタグの疑似要素で作成します。

.div-parent {
  position: relative;
  width: 100%;
  height: 148px;
  margin: 0 0 1em;
  background-color: #fff;
}
.div-parent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-size: 56px 56px;
}

まず、半径8pxで円の中心位置がセンター（デフォルト）の水玉模様です。

.style01::before {
  background-image: radial-gradient(#fff 8px, #87d9d1 8px);
  background-repeat: no-repeat;
}
.style02::before {
  background-image: radial-gradient(#fff 8px, #87d9d1 8px);
}

水玉模様を上下左右均等に配置する場合は、background-positionをデフォルトの0% 0%からcenterに変更します。

.style03::before {
  background-image: radial-gradient(#fff 8px, #87d9d1 8px);
  background-position: center;
}

次に、円の中心位置を左上に変更します。円が4分の1しか表示されず、繰り返しも水玉模様になりません。

.style04::before {
  background-image: radial-gradient(at left top, #fff 8px, #87d9d1 8px);
  background-repeat: no-repeat;
}
.style05::before {
  background-image: radial-gradient(at left top, #fff 8px, #87d9d1 8px);
}

円の中心位置を左からX軸方向に8px、上からY軸方向に8pxの位置に変更します。これで円が左上にぴったりくっつきました。

.style06::before {
  background-image: radial-gradient(at 8px 8px, #fff 8px, #87d9d1 8px);
  background-repeat: no-repeat;
}
.style07::before {
  background-image: radial-gradient(at 8px 8px, #fff 8px, #87d9d1 8px);
}

最後に、今まで正方形（background-size: 56px 56px）の中に円を作成しましたが、長方形（background-size: 56px 28px）に変更します。

円は楕円形になりました。これは円の形状のデフォルトがellipse（楕円形）のためです。

.style08::before {
  background-image: radial-gradient(#fff 8px, #87d9d1 8px);
  background-repeat: no-repeat;
  background-size: 56px 28px;
}

円の形状にcircle（正円）を指定します。これで長方形の中でも正円の水玉模様が作成できます。

.style09::before {
	background-image: radial-gradient(circle, #fff 8px, #87d9d1 8px);
	background-repeat: no-repeat;
	background-size: 56px 28px;
}
.style10::before {
	background-image: radial-gradient(circle, #fff 8px, #87d9d1 8px);
	background-size: 56px 28px;
}