background-image
CSSでは、背景画像を使うことができます。
本ページでは、background-imageプロパティについて説明します。
background-imageプロパティとは
background-imageプロパティを使うと、背景画像を表示することができます。また、グラデーションを使うこともできます。
background-imageの定義は、以下のとおりです。
値 | url | グラデーション | none |
---|---|
初期値 | none |
適用対象 | すべての要素 |
継承 | しない |
背景色が適用されていた場合でも、画像は背景色より前面になります。画像が表示できないなどの場合は、背景色が表示されます。
値の説明
urlは、背景画像を指定します。グラデーションは、「CSSでのグラデーション指定方法」をご参照ください。
noneを指定すると、背景画像が表示されません。
利用例
background-imageの利用例は、以下のとおりです。
【background-imageの利用例】
.test { background-image: url("../images/image1.png"); }
上記をクラスtestでdivなどに適用すると、以下のように表示されます。
background-image: url("image1.png"),url("image2.png");のように複数指定すると、先に記述した画像が上になります。その時は、上の画像で透明な部分や、画像が要素一杯に表示されない時は、後ろの画像も表示されます。
もう1つの例です。
【background-imageの背景画像とグラデーション適用例】
.test { background-image: linear-gradient(rgba(255,0,0,0.7), rgba(255,255,0,0.7)), url("../images/image1.png"); }
上記により、背景画像の上にグラデーションが表示されます。
ブラウザのサポート状況
各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。
項目 | IE | Ed | Fx | Ch | Sa | Op |
---|---|---|---|---|---|---|
background-image | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
項目 | Sa | An | Op | Ch | Fx | Sm |
---|---|---|---|---|---|---|
background-image | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
- 〇
- サポート
- △
- 制限あり
- ×
- 未サポート
- ?
- 不明
- IE
- Internet Explorer
- Ed
- Edge
- Fx
- Firefox
- Ch
- Chrome
- Sa
- Safari
- Op
- Opera
- An
- Android Browser
- Sm
- Samsung Internet
※スマートフォンのFirefoxとChromeは、Android版です。
「CSSプロパティ一覧」に戻る