background-image

CSSでは、背景画像を使うことができます。

本ページでは、background-imageプロパティについて説明します。

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プロパティ一覧」に戻る