background-color:要素の背景色を指定する

初期値 transparent
適用対象 全ての要素、::first-letterおよび::first-line
継承 しない
アニメーション <color>値
対応ブラウザ caniuseで確認

background-colorプロパティの説明

CSSのbackground-colorプロパティは、要素に背景色を指定します。色指定で使える値は、colorと同じく<color>値で定義できるものです。ここで扱えるのは、単一色による塗りつぶしや透明度です。グラデーションは画像扱いになるため、このプロパティでは制御できません。

背景にグラデーションを指定する場合は、画像を取り扱えるbackground-imageか、ショートハンド・プロパティのbackgroundを使用して下さい。それ以外の背景に関する値を一括で指定する場合も、backgroundを使用します。

background-colorに指定できる値

<color>
CSSで使用できる色の指定値で、色々な記述方法が用意されています。背景画像を使用する場合、何らかの理由で画像が表示されなかった場合の代替色にもなります。具体的な書き方を以下に示します。
keyword
特定の色を表すキーワードです。例えば、赤はred、青はblueのように名称による指定ができます。表示される色は他の値でも再現できます。一覧はカラーコードを参照して下さい。
currentColor
要素のcolorプロパティの値を参照します。参照先の値が明記されていない場合、継承すべき値が採用されます。
16進数値
16進数の文字列(0〜9, A〜F)を使った表記です。先頭にシャープ(#)を置き、6桁または3桁で表現します。透明度を表す場合はアルファチャネルを追加し、8桁または4桁で表現します。例えば、赤を表現する場合、#ff0000または#f00となります。
RBG値
光の三原色(赤、青、緑)の分量でsRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。構文はrgb()またはrgba()です。
HSL値
色相(H)、彩度(S)、明度(L)の各成分によって与えられたsRGB色空間の位置を指定します。任意で透明度を表すアルファチャネルを追加できます。構文はhsl()またはhsla()です。
システム色
ブラウザ側で用意してあるパレットを呼び出す祭に指定します。システム色はベンダーが公開しているキーワードを使います。ただし、全てのブラウザが対応しているわけではないので、使用する場面は限定的です。

background-colorの使い方とサンプルコード

background-colorプロパティの構文は以下の通りです。


/* キーワード値 */
background-color: cyan;
background-color: magenta;
background-color: yellow;
background-color: black;

/* 16進数値 */
background-color: #ffffff;    /* 不透過 */
background-color: #fff;       /* 不透過の短縮形 */
background-color: #ffffffaa;  /* アルファ値の追加 */
background-color: #fffa;      /* アルファ付きの短縮形 */

/* RGB 値 */
background-color: rgb(255, 255, 255);  /* 不透過の白 */
background-color: rgba(0, 0, 0, 0.5);  /* 半透明の黒 */

/* HSL 値 */
background-color: hsl(240, 100%, 50%);  /* 不透過の青 */
background-color: hsla(0, 0%, 25%, .5); /* 半透明の灰色 */

/* 特殊なキーワード値 */
background-color: currentcolor;
background-color: transparent;

/* グローバル値 */
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: unset;

background-blend-modeの実例

それでは実際に背景色を指定した要素を見てみましょう。それぞれの色は、別の表記による再現が可能です。どの表記であっても同様の色を指定することが可能なので、制作しやすい形式を採用して下さい。

#bg_1 {
	background-color: #ff0000;
}
#bg_2 {
	background-color: #f004;
}
#bg_3 {
	background-color: rgb(255, 255, 255);
}
#bg_4 {
	background-color: hsl(36, 100%, 50%);
}
#bg_5 {
	background-color: hsla(118, 42%, 52%, .5);
}

背景にグラデーションを指定するやり方

要素の背景にグラデーションを指定する場合、background-colorに直接記述することはできません。なぜなら背景のグラデーションは画像扱いになるからです。要素の背景にグラデーションを表示させたい場合は、画像を取り扱えるbackground-imagebackgroundを使用して下さい。

#bg_1 {
	background: linear-gradient(cyan, magenta);
}
#bg_2 {
	background: linear-gradient(to right, cyan, magenta);
}
#bg_3 {
	background: linear-gradient(to bottom right, cyan, magenta);
}
#bg_4 {
	background: linear-gradient(45deg, cyan, magenta);
}
#bg_5 {
	background: linear-gradient(#f00, #ff0, #cf0, #0f0, #0cf, #00f);
}
#bg_6 {
	background: linear-gradient(#ff0, 75%, #0ff);
}
#bg_7 {
	background: linear-gradient(#ff0, 25%, #0ff);
}
#bg_8 {
	background: linear-gradient(#ff0 50%, #0ff 50%);
}

background-colorに関連するCSSプロパティ

背景(バックグラウンド)
background 背景に関する指定をまとめて行う
background-attachment 背景画像の固定・移動を指定する
background-blend-mode 背景色や背景画像の描画モードを指定する
background-clip 背景の描画範囲を指定する
background-color 背景色を指定する
background-image 背景画像やグラデーションを指定する
background-origin 背景画像を配置する基準点を指定する
background-position 背景画像の表示開始位置を指定する
background-repeat 背景画像の繰り返しを指定する
background-size 背景画像を表示するサイズ(大きさ)を指定する
backdrop-filter 要素の背後領域にぼかしや色変化などのフィルタ効果を与える