background-color

background-colorプロパティとは

background-colorプロパティを使うと、背景色を変えることができます。

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

初期値がtransparent(透明)のため、デフォルトでは親要素の背景が表示されます。

背景に画像が適用されていた場合は、画像が背景色より前面になります。このため、背景画像が要素全体に表示される場合は、背景色が隠れます。要素全体に表示されない場合は、残った部分に背景色が表示されます。

値の説明

背景色の指定方法は、「CSSでの色の指定方法」をご参照ください。

利用例

background-colorの利用例は、以下のとおりです。

body {
  background-color: #C0C0C0;
}

上記のようにbodyに適用すると、以下のようにページ全体で背景色がシルバー(#C0C0C0)になります。

もう1つの例です。

.test {
  background-color: lightgray;
}

上記を、クラスtestで要素に適用すると、適用した要素の背景がライトグレーになります。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

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