background-color - 背景色を指定する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのbackground-colorは、背景色を指定するためのプロパティです。

サンプルコード

下記は、ID属性がtargetの背景色を#D36015に指定するためのサンプルコードです。

<div id="target">
	<p>[#target]の要素</p>
</div>

#target {
	background-color: #D36015 ;
}

デモ

スタイルシートでbackground-colorを指定したデモです。CSSを編集して、どのように変わるのか確認してみましょう。

RUN
HTML
CSS
JavaScript

<div id="target"> <p>[#target]の要素</p> </div>

#target { background-color: #D36015 ; } /* 下記は[background-color]とは関係ありません */ body { background-image: url( "/background.png" ) ; } div { line-height: 100px ; height: 100px ; text-align: center ; }

値の指定

値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目	説明
transparent	初期値。色の設定なし。
inherit	親要素の値を引き継ぐ。例の場合、`p`要素の背景色は`#D36015`に設定される。
initial	プロパティの初期値が適用される。この場合、`transparent`となる。
COLOR NAME	CSSに対応したカラーネーム(`purple`)で色を指定する。
Hex	16進数(`#2660A1`)で指定する。
RGB	RGB値(`rgb( 211, 96, 21 )`)で指定する。
RGBA	RGBに透明度を加えたRGBA値(`rgba( 211,96,21, 0.2 )`)で指定する。透明度を`0`〜`1`の間で指定する。透明にすると背景の要素が透けて見えます。
HSL	HSL値(`hsl( 24, 82%, 46% )`)で指定する。
HSLA	HSL値に透明度を加えたHSLA値(`hsla( 24, 82%, 46%,.3 )`)で指定する。透明度を`0`〜`1`の間で指定する。透明にすると背景の要素が透けて見えます。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

Chrome
●
-
時期不明
Firefox
●
-
時期不明
Safari
●
-
時期不明
Ie
●
-
時期不明
Edge
●
-
時期不明
Opera
●
-
時期不明
Safari(iOS)
●
-
時期不明
Ie Mobile
●
-
時期不明
Chrome
●
-
時期不明
Android
●
-
時期不明
FF Mobile
●
-
時期不明
Opera Mobile
●
-
時期不明