background-repeat プロパティ
プロパティ background-repeat は、
要素の背景画像をどのように繰り返すかを
設定します。デフォルトでは、画像はX軸とY軸の両方で繰り返され、
これにより利用可能な領域全体が覆われます。
構文
セレクター {
background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}
値
| 値 | 説明 |
|---|---|
no-repeat |
画像はまったく繰り返されません。 |
repeat-x |
画像はX軸方向に繰り返されます。 |
repeat-y |
画像はY軸方向に繰り返されます。 |
repeat |
画像はX軸とY軸の両方で繰り返されます。 |
space |
領域を完全に埋めるように画像が繰り返されます。 これが不可能な場合、画像の間に空きスペースが追加されます。 |
round |
領域に整数個の画像が収まるように繰り返されます。 これが不可能な場合、背景画像は拡大縮小されます。 |
デフォルト値: repeat - パターンで画面全体を覆います。
例
デフォルトでは、背景画像は要素全体を敷き詰めます：
<div id="elem"></div>
#elem {
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
画像が繰り返されないようにしてみましょう：
<div id="elem"></div>
#elem {
background-repeat: no-repeat;
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
次に、画像をX軸方向に繰り返してみます：
<div id="elem"></div>
#elem {
background-repeat: repeat-x;
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
次はY軸方向です：
<div id="elem"></div>
#elem {
background-repeat: repeat-y;
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
軸方向に繰り返される画像は、background-position プロパティを使用して配置できます：
<div id="elem"></div>
#elem {
background-repeat: repeat-y;
background-position: top center;
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
値 space の動作を見てみましょう：
<div id="elem"></div>
#elem {
background-repeat: space;
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
例
値 round の動作を見てみましょう：
<div id="elem"></div>
#elem {
background-repeat: round;
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
関連項目
-
背景に関する一括指定プロパティである
backgroundプロパティ、
