小さい2色の水玉模様の背景デザイン（デモ２）

こちらは、サイトの背景を縦横に並ぶ小さい2色の水玉模様（間隔広め）で装飾した場合のデモページです。

コードを表示している下記の囲み枠は、枠の横幅をコードが超えると、左右にスクロールするようになります。コードが囲み枠から見切れていたら、横スクロールさせてご覧ください。

/// CSS /// 
 
body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(#c8f5cb 2px, transparent 3px) center / 60px 60px,
        radial-gradient(#e7c7fe 2px, transparent 3px) calc(50% + 30px) 50% / 60px 60px,
        radial-gradient(#c8f5cb 2px, transparent 3px) calc(50% + 30px) calc(50% + 30px) / 60px 60px,
        radial-gradient(#e7c7fe 2px, transparent 3px) 50% calc(50% + 30px) / 60px 60px,
        #fffeff;
}

p {
    padding: 1em;
    background: #a69ea6;
    color: #333333;
}