CSS - background-image CSS - background-image| 属性名 | background-image |
|---|---|
| 値 | <image>[, <image>]* |
| 値の詳細 | <image> = <url> | <gradation> | none |
| 初期値 | none |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari | |
|---|---|---|---|---|---|---|
| 基本 | CSS1 | 3.0 | 1.0 | 1.0 | 3.5 | 1.0 |
| 複数背景 | CSS3 | 9.0 | 3.6 | 1.0 | (有り) | 1.3 |
| グラデーション | CSS3 | 10 | 3.6(-moz) 16 | 1.0(-webkit) 26 | 11(-o) 12.1 | 4.0(-webkit) 6.1 |
背景画像を指定します。
| 値 | 説明 |
|---|---|
| none | 背景画像を表示しません。 |
| <url> | 背景画像のURLを指定します。 |
| <gradation> | グラデーションを指定します。詳細はサンプルを参照してください。 |
.test1 {
color: black;
background-image: url(./image/back.gif);
width: 100px;
height: 100px;
border: 1px solid gray;
}
<div class="test1">こんにちわ</div>
背景を複数指定するサンプルを下記に示します。
.test2 {
background-image:
url(./image/back-green.gif),
url(./image/back-red.gif),
url(./image/back-red.gif),
url(./image/back-green.gif);
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position:
top left,
top right,
bottom left,
bottom right;
width: 100px;
height: 100px;
border: 1px solid gray;
}
<div class="test2">こんにちわ</div>
背景にグラデーションをかけるサンプルを下記に示します。
.test3 {
background-image:
linear-gradient(to right, rgba(255,255,255,0), #fff),
url(./image/back.gif);
background-repeat:
no-repeat,
repeat;
width: 100px;
height: 100px;
border: 1px solid gray;
}
<div class="test3">こんにちわ</div>