概要
この記事では、CSSのbackground-colorとbackgroundの2つのプロパティの違いについて記述したいと思います。
background-color
background-color はCSSプロパティで、要素の背景色を指定します。
その色は、要素とその内容が占める全領域に適用されます。
基本的な使用方法は次のとおりです。
selector {
background-color: color;
}
ここで selector はスタイルを適用したいHTML要素を指定し、color は任意の色を表す値です。色はキーワード（red、blue 等）、RGB（rgb(255, 0, 0)）、RGBA（rgba(255, 0, 0, 0.3)）、HEX（#FF0000）など、様々な形式で指定することができます。
background
background はCSSのショートハンドプロパティで、要素の背景に関連する複数のプロパティを一度に設定することができます。
これには background-color だけでなく、 background-image、background-repeat、background-position、 background-size、 background-origin、 background-clip、 background-attachment などが含まれます。
基本的な使用方法は次のとおりです。
selector {
background: color image repeat position/size origin clip attachment;
}
これらの値はすべてオプションであり、任意の順序で指定できます。ただし、position と size はスラッシュ (/) で分割され、size は position の後に指定する必要があります。
background-color と background の違い
これら2つのプロパティの主な違いは、background-color が単一のプロパティであるのに対し、 background は複数の背景に関連するプロパティを一度に設定できるショートハンドプロパティであることです。
それぞれの使用は目的による。background-color は特定の背景色のみを設定するために使用し、それ以外の背景に関連するスタイルを変更したくない場合に便利です。一方、 background は複数の背景に関連するプロパティを一度に設定したいときに使用します。これは特に背景画像を扱うときに役立ちます。