【CSS】background-colorとbackgroundの違い

ふと、CSSのbackground-colorとbackgroundの違いって何だろう?って思いました。

いつもは背景色を指定する場合は、

<style>
  #TableA{
    background-color: #FF8888;
  }
</style>

のようにbackground-colorを使用しています。

しかし度々、以下のように書かれたものも見ます。

<style>
  #TableA{
    background: #FF8888;
  }
</style>

どちらも同じ結果になるとは言え、どう違うんだろうと思っていました。
もともと見た目のデザインに興味が無かったことが、今まではっきり知らなかった原因なのですが。。。

background-colorとbackgroundの違いを言うと、個別に設定するか、まとめて設定するかの違いでした。

背景の指定には次の指定ができます。

背景色を指定する background: ***;
背景の画像を指定する background-image: url(***);
背景画像の並び方を指定する background-repeat: ***;
背景画像の表示位置を指定する background-position: ***;
背景画像のスクロールについて指定する background-attachment: ***;
個別に指定する際は、上述のプロパティを使います。

逆に一括で指定したい場合は、backgroundプロパティを使います。
backgroundは、背景色や背景画像(並び方、スクロール、位置)を一括で指定するプロパティです。
このbackgroundプロパティを要素に対して設定すると、文書全体の背景をひとまとめに指定することができます。
具体的には、要素ID:TableAに対し、背景色(白)/背景画像(***.gif)/並び方(垂直方向)/表示位置(右上)/固定表示(固定する)

#TableA{
 background: #ffffff url(***.gif) repeat-y right top fixed;
}

このように一括して設定できます。

注意点としては、backgroundプロパティに指定していないプロパティは、デフォルトで設定されます。
例えば、

#TableA{
  background-image: url(***);
  background: #ffffff repeat-y right top fixed;
}

としてしまった場合、背景画像(***.gif)は指定されなかったとみなされます。
要は真っ白背景が表示されるだけです。

ちょっと気になったので、システム備忘録として載せておきます。