コピペでできる。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-positionbackground-sizeで設定したサイズの50%です。

background-size: 20px 20px;

background-size: 40px 40px;

background-size: 60px 60px;

コメントをする

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

ダウンロードする

お電話でのお問い合わせはこちら

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はご遠慮ください。