こちらは、サイトの背景を斜めに並んだ小さな水玉模様で装飾した場合のデモページです。
コードを表示している下記の囲み枠は、枠の横幅をコードが超えると、左右にスクロールするようになります。コードが囲み枠から見切れていたら、横スクロールさせてご覧ください。
/// CSS ///
body {
margin: 0;
padding: 0;
background:
radial-gradient(#fffeff 2px, transparent 3px) center / 40px 40px,
radial-gradient(#fffeff 2px, transparent 3px) calc(50% + 20px) calc(50% + 20px) / 40px 40px,
#fed2dc;
}
p {
margin: 1em;
padding: 1em;
background: #b2939a;
color: #33282a;
}