Title

background-repeatとは

background-repeat とは次の語句からなるCSSのプロパティです。

background

読み: バックグラウンド
意味: 背景

repeat

読み: リピート
意味: 繰り返し、反復

目次に戻る

background-repeatプロパティの概要

このプロパティは背景に指定した画像をどのように繰り返すかを指定することができます。

背景画像を水平方向や垂直方向に繰り返し表示したり、繰り返しの仕方も指定することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{background-repeat: 設定値}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使う要素はdiv要素です。 div要素には背景画像としてサッカーボールの画像を指定しています。 これにより、各キーワードでどのようにサッカーボールがどのように繰り返し表示されるかを見て確認できます。

初期値: repeat

初期値のrepeatキーワードは、 背景画像を水平、垂直方向ともに繰り返し表示します。

div{background-repeat: repeat;}

目次に戻る

キーワード値: repeat-x

repeat-xキーワードは、 背景画像を水平方向にのみ繰り返し表示します。

div{background-repeat: repeat-x;}

目次に戻る

キーワード値: repeat-y

repeat-yキーワードは、 背景画像を垂直方向にのみ繰り返し表示します。

div{background-repeat: repeat-y;}

目次に戻る

キーワード値: no-repeat

no-repeatキーワードは、 背景画像を繰り返し表示しません。

div{background-repeat: no-repeat;}

目次に戻る

キーワード値: space

spaceキーワードは、 背景画像を繰り返しできる数だけ、余白を含みながら割り付け表示します。 また、水平、垂直ともに表示領域の両端に画像が接触するように割り振られます。

div{background-repeat: space;}

目次に戻る

キーワード値: round

roundキーワードは、 背景画像を伸縮調整して割り付け表示します。 また、水平、垂直ともに表示領域の両端に画像が接触するように割り振られます。

div{background-repeat: round;}

目次に戻る

応用: 二つのキーワードの組み合わせ

repeat・space・round・no-repeatのキーワードを二つ組み合わせることができます。 キーワードとキーワードの間は半角スペースで区切る必要があります。 この場合、一つ目のキーワードは水平方向への繰り返し方法の指定となり、二つ目のキーワードが垂直方向への繰り返し方法の指定となります。

このサンプルの場合は、水平方向はspaceキーワードでの振る舞いとなり、垂直方向がroundキーワードの振る舞いとなりますので 画像は水平方向には余白を含みながら割り付けられ、垂直方向には伸縮調整して割り付けされていますので画像は元の画像とは縦横比率が変わっています。

div{background-repeat: space round;}

目次に戻る

グローバル値

background-repeatプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のrepeatに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{background-repeat: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

background-repeat: repeat;

background-repeat: repeat-x;

background-repeat: repeat-y;

background-repeat: no-repeat;

background-repeat: space;

background-repeat: round;

background-repeat: space round;

background-repeat: space repeat;

background-repeat: repeat space;

目次に戻る