属性名 | 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>