| 属性名 | border |
|---|---|
| 値 | [ <bg>,]* <final-bg>* |
| 値の詳細 |
<bg> =
<image>
|| <position>
[/ <size>]?
|| <repeat>
|| <attachment>
|| <origin>
|| <clip> <final-bg> = <bg> || <color> |
| 初期値 | 個々の属性値を参照 |
| 適用可能要素 | すべて |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 個々の属性値を参照 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari | |
|---|---|---|---|---|---|---|
| 基本 | CSS1 | 3.0 | 1.0 | 1.0 | 3.5 | 1.0 |
| <image> <color> | CSS1 | 3.0 | 1.0 | 1.0 | 3.5 | 1.0 |
| <position> <repeat> <attachment> | CSS1 | 4.0 | 1.0 | 1.0 | 3.5 | 1.0 |
| 複数背景 | CSS3 | 9.0 | 3.6 | 1.0 | 10.5 | 1.3 |
| <size> | CSS3 | 9.0 | 18 | 21 | 21 | 5.1 |
| <origin> <clip> | CSS3 | 9.0 | 22 | 31 | 21 | 5.1 |
背景色や背景画像をまとめて指定します。<image>, <position>, <size>, <repeat>, <attachment>, <origin>, <clip>, <color> は順不同でひとつ以上指定します。<size> を指定する場合は / で区切ってください。CSS3 以降では、カンマ(,)を用いて、複数の背景画像に対する設定を行うことができます。複数指定の場合、<color> による背景色指定は、一番最後のグループでのみ使用可能です。
| 値 | 説明 |
|---|---|
| <image> | 背景画像を指定します。詳細は background-image を参照してください。 |
| <position> | 背景画像の位置を指定します。詳細は background-position を参照してください。 |
| <size> | 背景画像のサイズを指定します。詳細は background-size を参照してください。<position> の後にスラッシュ(/)をつけて記述します。 |
| <repeat> | 背景画像の繰り返しを指定します。詳細は background-repeat を参照してください。 |
| <attachment> | 背景画像の貼り付け方法を指定します。詳細は background-attachment を参照してください。 |
| <origin> | 背景画像表示の基準位置を指定します。詳細は background-origin を参照してください。 |
| <clip> | 背景画像の表示領域を指定します。詳細は background-clip を参照してください。省略時は <origin> と同じ値が設定されます。 |
| <color> | 背景色を指定します。詳細は background-color を参照してください。 |
.sample-simple {
background: #cc9999 url(image/back.gif) no-repeat 50% 50%;
width: 100px;
height: 100px;
border: 1px solid gray;
margin-left: 1em;
}
.sample-multiple {
background:
url(image/back.gif) no-repeat top right,
url(image/back.gif) no-repeat top left,
url(image/back.gif) no-repeat bottom left,
url(image/back.gif) no-repeat bottom right,
#cc9999;
width: 100px;
height: 100px;
border: 1px solid gray;
margin-left: 1em;
}
<h5>simple</h5> <div class="sample-simple">こんにちわ</div> <h5>multiple</h5> <div class="sample-multiple">こんにちわ</div>