こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

CSSのbackground-imageを使うことでストライプ（ボーダー）やドット模様など意外と色んな背景模様を作ることが出来ます。
この記事では知らなければついつい画像で処理してしまうような背景模様の作り方をいろいろご紹介したいと思います。

ストライプ（ボーダー）

CSSのbackground-imageで横ストライプ（ボーダー）を作るコードはこちら。

.stripe{
    background-image: repeating-linear-gradient(0deg, #fff 0px, #fff 10px, #dc5a45 10px, #dc5a45 20px);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

CSSのbackground-imageで縦ストライプ（ボーダー）を作るコードはこちら。

.stripe{
    background-image: repeating-linear-gradient(90deg, #fff 0px, #fff 10px, #dc5a45 10px, #dc5a45 20px);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

CSSのbackground-imageで斜めストライプ（ボーダー）を作るコードはこちら。

.stripe{
    background-image: repeating-linear-gradient(45deg, #fff 0px, #fff 10px, #dc5a45 10px, #dc5a45 20px);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

CSSのbackground-imageで作るストライプ（ボーダー）についてはこちらのブログで詳しくご紹介しています。

【background-image】CSSだけでストライプ（ボーダー）を作る方法

ドット模様

CSSのbackground-imageでドット模様を作るコードはこちら。

.dot{
    background-image: radial-gradient(#e8c72e 30%, #fff 30%);
    background-size: 20px 20px;
    background-position: 0ox 0px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

CSSのbackground-imageで作るドット模様についてはこちらのブログで詳しくご紹介しています。

【background-image】CSSだけでドット模様を作る方法

方眼紙（グリッド）

CSSのbackground-imageで方眼紙（グリッド）を作るコードはこちら。

.grid{
    background-image: linear-gradient(0deg, transparent 18px, #aaa 19px),
                      linear-gradient(90deg, transparent 19px, #aaa 20px);
    background-size: 20px 20px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

チェック模様

CSSのbackground-imageでチェック模様を作るコードはこちら。

.check{
    background-image: linear-gradient(-90deg, #3d8582 50%, transparent 50%),
                      linear-gradient(#3d8582 50%, transparent 50%);
    background-size: 20px 20px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

市松模様

CSSのbackground-imageで市松模様を作るコードはこちら。

.ichimatsu{
    background-image: linear-gradient(45deg, #dc5a45 25%, transparent 25%, transparent 75%, #dc5a45 75%),
                      linear-gradient(45deg, #dc5a45 25%, transparent 25%, transparent 75%, #dc5a45 75%);
    background-position: 0 0, 20px 20px;
    background-size: 40px 40px;
    background-color: #fff;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
画像を使わなくてもCSSだけでこんなにも色んな模様を作ることが出来ます。
まだまだ変わった模様をCSSだけで作ることが出来るので少しずつサンプルを増やしていきたいです。