background-repeat

background-repeatプロパティとは

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

background-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の利用例は、以下のとおりです。

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

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

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

repeat-y

repeat

space

round

no-repeat

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

background-repeat: repeat space;

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

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

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

.test {
  height: 150px;
  border: solid;
  background-image: url("../images/image1.png"), url("../images/image2.png");
  background-repeat: space no-repeat,space;
}

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

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

ブラウザのサポート状況

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

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

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