コピペでできる。CSSだけで作る水玉模様（ドット柄）の背景パターン

背景に水玉模様があるだけでポップさや可愛らしさの要素を表現できます。
これは画像を使わずにCSSだけで作っています。

CSSの書き方

さっそく基本のコードをみていきましょう。
4つのbackgroundプロパティのみで書きあげています。

body {
	background-color: #fcfcfc;
	background-image: radial-gradient(#eee 10%, transparent 20%), radial-gradient(#eee 10%, transparent 20%);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px;
}

水玉の大きさをカスタマイズ

水玉の大きさはbackground-sizeで変更できます。
水玉をレンガのように交互に配置するにはbackground-positionの設定値をbackground-sizeで設定したサイズの50%に設定します。
大きさ比較ができるようにいくつかのパターンをサンプルでご用意しています。

いずれもbackground-positionはbackground-sizeで設定したサイズの50%です。

background-size: 20px 20px;

background-size: 40px 40px;

background-size: 60px 60px;