background-repeat CSS プロパティとは
トピック：背景イメージが繰り返されるかどうかを設定する 事ができる デフォルトでは、背景画像は垂直方向と水平方向の両方で繰り返する
プロパティ background-repeat
実例 コード 1
サンプル コードを試す body {
background-image: url("../webref.jpg");
background-repeat: repeat-y;
}
情報：- 背景画像は背景位置プロパティに従って配置され ます。background-positionが指定されていない場合、イメージは常に要素の左上隅に 配置 される 。
トピック：背景画像の繰り返し描画を指定します。 垂直方向と水平方向の両方を繰り返す ことができる かどうかを指定することができる。
プロパティ 定義と使用法
| デフォルト値・初期値 : | repeat |
|---|
| 適用対象 : | 全要素。 ::first-letter and ::first-line にも適用されます。 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | リスト、各項目は次元ごとに1つの2つのキーワードで構成されます |
|---|
CSS Version | CSS1 |
|---|
| アニメーションの種類 : | 個別 |
|---|
| JavaScript 構文 | object.style.backgroundRepeat="repeat-x" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | background-repeat: repeat |repeat-x |repeat-y |no-repeat |initial |inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
repeat | 背景画像は、縦方向と横方向の両方で繰り返されます。最後の画像が収まらない場合は、クリップされます。これはデフォルトです |
repeat-x | 背景画像は水平方向にのみ繰り返される |
repeat-y | 背景画像は垂直方向にのみ繰り返される |
no-repeat | 背景画像は繰り返されません。画像は1回だけ表示されます |
space | 背景画像は、クリッピングすることなくできるだけ繰り返される。最初と最後のイメージは要素のいずれかの側に固定され、空白はイメージ間で均等に分散されます |
round | 背景画像は、空間を埋めるように繰り返され、盛り上がったり伸びたりします（ギャップなし） |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするブラウザ対応・互換性
| Property | Chrome | Edge | Firefox | Safari | Opera |
|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS background-repeat | CSS プロパティ 値| 意味 使い方 実例 – WebRef