ふと、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)は指定されなかったとみなされます。
要は真っ白背景が表示されるだけです。
ちょっと気になったので、システム備忘録として載せておきます。