この記事ではCSSの【background-repeat】の使い方をご紹介します。

background-repeatを使うと、背景画像の繰り返しを設定することができるのでパターン画像を使う時にはよく使われるプロパティですね。

スポンサーリンク

background-repeatの基礎知識

実際にbackground-repeatのプロパティ値をまとめてみました。

repeat-x  横に繰り返す
 repeat-y  縦に繰り返す
repeat  全面に繰り返す
space  表示エリアに応じて余白で調整する
round  表示エリアに応じて画像を伸縮する
no-repeat  画像を繰り返さない

spaceとroundはあまり使う機会がないので、基本的にはrepeat(repeat-x/repeat-y)とno-repeatのどちらかを使うことがほとんどです。

background-repeatを用いたサンプルコード

では実際にひとつずつサンプルを見ていきましょう。

サンプルではdiv要素にbackground-imageで以下の星の画像を指定して、background-repeatを使って繰り返しの設定をしています。

repeat-x

See the Pen background-repeat1 by handywebdesign (@handywebdesign) on CodePen.

repeat-xを使うと横に画像が繰り返されます

repeat-y

See the Pen background-repeat2 by handywebdesign (@handywebdesign) on CodePen.

repeat-yを使うと縦に画像が繰り返されます

repeat

See the Pen background-repeat3 by handywebdesign (@handywebdesign) on CodePen.

repeatの場合は縦にも横にも画像が繰り返されます

space

See the Pen background-repeat4 by handywebdesign (@handywebdesign) on CodePen.


spaceeは画像のサイズが、表示エリアの倍数でない場合に余白ができます。表示エリアが150pxの場合は、画像サイズ(30px)の倍数なので余白はできません

See the Pen background-repeat5 by handywebdesign (@handywebdesign) on CodePen.


試しに表示エリアを170pxにすると、倍数にならないので画像同士に余白ができます

round

See the Pen background-repeat6 by handywebdesign (@handywebdesign) on CodePen.

spaceとは違い、roundを使うと表示エリアが画像サイズの倍数でない場合は、余白ではなく画像自体が伸縮されます

no-repeat

See the Pen background-repeat7 by handywebdesign (@handywebdesign) on CodePen.

no-repeatを使うと画像が繰り返されません

background-repeatはパターン画像の繰り返しに便利

Webデザインでよく使う使い方はやはり冒頭でも説明した、パターン画像を繰り返す時ですね。

background-colorで色をベタ塗りするのとは違い、パターン画像はフリー素材でも種類が豊富ですし、自分で作ればよりオリジナル性も高まります。

というわけでbackground-repeatの使い方についてでした。