CSSのbackgroundとbackground-colorの違いとは？正しい使い分けが重要な理由

CSSに関する質問で最もよく寄せられるのが、「backgroundとbackground-colorの違いは何ですか？」というものです。混乱が生じる原因は、要素に背景色を適用する際、開発者がこの2つを同じ意味で使っているのを頻繁に見かけるからでしょう。

しかし、実はこの2つは同じではありません。backgroundプロパティ（-colorなし）は、1つの宣言だけで要素のすべての背景関連プロパティを設定できる強力なプロパティです。例えば、背景色・繰り返しなし（no-repeat）の背景画像・画像の表示位置を、たった1行でまとめて指定できます。

background: #444 url("image.jpg") no-repeat left top;

上記のコードは、以下のように個別に書くことも可能です。

background-image: url("url/image.jpg");
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
background-color: #444;

つまりbackgroundプロパティは、複数の宣言を1行にまとめられる便利なショートハンド（省略記法）として使え、コードの行数を大幅に節約できます。

宣言 = CSSプロパティ + 値

一方、background-colorプロパティは、要素の背景色のみを設定するためのものです。より大きなbackgroundプロパティの一部（サブセット）と考えると分かりやすいでしょう。

注意：backgroundプロパティは以前の宣言をすべてリセットします！

ここが最も重要なポイントです。すでに要素にbackground-colorやbackground-imageなどの背景関連の宣言を適用していた場合、その後に同じ要素へbackground: red;という宣言を追加すると、それまでのすべての背景宣言がリセットされます。結果として、要素の背景は赤くなり、設定していた背景画像は消えてしまいます。

具体例で見てみよう

CodePenのサンプルを見てください。ここには同じ.boxクラスを持つ3つのdiv要素があります。最初の要素には.boxクラスだけが付いていますが、残りの2つにはそれぞれユーティリティ（ヘルパー）クラスの.bg-redと.bg-blueも追加されています。

何か違いに気づきましたか？

2番目のボックスは完全に赤一色で、画像が表示されていません。しかし.boxクラスでは、他の2つの要素と同じJavaScriptの画像を表示するよう明確に指定されているはずです。

HTML：

<div class="box"></div>
<div class="box bg-red"></div>
<div class="box bg-blue"></div>

CSS：

.box {
  margin: 1rem;
  height: 100px;
  width: 150px;
  background-color: black;
  background-image: url("https://techstacker.com/static/placeholder-thumbnail-javascript-322632ee75bc4a676b0b067b31eaf969.svg");
  background-repeat: no-repeat;
}

.bg-red {
  background: red;
}

.bg-blue {
  background-color: blue;
}

CSSをよく見て、.bg-redと.bg-blueを比較してみましょう。赤いクラスでは「マスター」（オールインワン）であるbackgroundプロパティを使って赤色を指定していますが、青いクラスでは単一目的のbackground-colorを使用しています。

.bg-redクラスのbackgroundプロパティは、2番目のdiv要素に対して他のすべての背景宣言（-image、-repeat、-colorなど）を削除し、指定されたredの値だけをその要素の唯一の背景属性として設定します。

結論：意図的に使えばどちらも有効

したがって、特定の要素の背景色だけを変更したい場合は、必ずbackground-colorを使いましょう。backgroundを使うと、その要素に既存の背景関連の宣言がすべて上書きされてしまいます。

ただし、以前の宣言をすべてリセットすることが目的の場合もあります。例えば、レガシーコードだらけで触りたくない（または触る権限がない）ウェブサイトで作業しているとき、特定の要素に残された大量の宣言を、新しい単一の値（例：色）で置き換えたいケースです。そんなときこそ、backgroundプロパティは絶大な威力を発揮する優れたツールになります。