background-repeat

CSSでは、背景画像をどのように繰り返し表示するのか指定することができます。

本ページでは、background-repeatプロパティについて説明します。

background-repeatプロパティとは

background-repeatプロパティを使うと、背景画像が要素全体を埋めない時、どのように繰り返し表示するのか指定することができます。

background-repeatの定義は、以下のとおりです。

【background-repeatの定義】
repeat-x | repeat-y | repeat | space | round | no-repeat
初期値 repeat
適用対象 すべての要素
継承 しない

赤字のrepeatからno-repeatは、2つまで記述できます。その際は、最初の記述が水平方向、後の記述が垂直方向の繰り返しを示します。

background-imageで複数画像を指定していた場合は、カンマ(,)で区切って複数指定できます。

値の説明

以下は、background-repeatで使える値と説明です。

repeat-x
水平方向に繰り返します。repeat no-repeatと記述した時と同じです。
repeat-y
垂直方向に繰り返します。no-repeat repeatと記述した時と同じです。
repeat
水平、垂直方向に繰り返します。デフォルトです。
space
水平、垂直方向に繰り返します。繰り返した際に、画像が途中で切れる場合は表示せずに、これまで表示した画像の間隔を空けて均等に配置します。
round
水平、垂直方向に繰り返します。繰り返した際に、画像が途中で切れる場合は、全体の画像を拡大・縮小して、収まるようにします。
no-repeat
繰り返しません。

利用例

background-repeatの利用例は、以下のとおりです。

【background-repeatの利用例】
.test {
  height: 150px;
  border: solid;
  background-image: url("../images/image1.png");
  background-repeat: repeat-x;
}

上記をクラスtestでdivなどに適用すると、以下のように表示されます。

repeat-xを指定した例

次からは、repeat-x以外のキーワードでの表示例を示します。

repeat-y
repeat-yを指定した例
repeat
repeatを指定した例
space
spaceを指定した例
round
roundを指定した例
no-repeat
no-repeatを指定した例

以下は、キーワードの組み合わせです。

【background-repeatでキーワードを組み合わせる】
background-repeat: repeat space;

上記は、以下のように表示されます。

background-repeatでキーワードを組み合わせた例

水平方法がrepeatのため右端で画像が途切れていますが、垂直方向がspaceのため下は途切れておらず画像間にスペースがあります。

次は、複数画像を使っている場合です。

【複数画像の利用例】
.test {
  height: 150px;
  border: solid;
  background-image: url("../images/image1.png"), url("../images/image2.png");
  background-repeat: space no-repeat,space;
}

上記は、以下のように表示されます。

background-repeatで複数画像を組み合わせた例

最初の画像(image1.png)は、垂直方向がno-repeatのため一番上だけ表示されていて、image2.pngは次から表示されています。横の並び方は、どちらもspaceなので同じになっています。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
background-repeat
【スマートフォン】
項目 Sa An Op Ch Fx Sm
background-repeat
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る