background-image

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

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

background-imageプロパティとは

background-imageプロパティを使うと、背景画像を表示することができます。また、グラデーションを使うこともできます。

background-imageの定義は、以下のとおりです。

背景色が適用されていた場合でも、画像は背景色より前面になります。画像が表示できないなどの場合は、背景色が表示されます。

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	〇	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。