| 属性名 | background-image |
|---|---|
| 値 | <bg-image># |
| 値の詳細 | <bg-image> = <image> | none |
| 初期値 | none |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| サポート | https://caniuse.com/mdn-css_properties_background-image |
背景画像を指定します。
| 値 | 説明 |
|---|---|
| <image> | 背景画像のイメージを指定します。 |
| none | 背景画像を表示しません。 |
.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>