CSSにできること―背景編

CSSにできること第三弾。今回は背景色、背景画像編です。
前作：CSSにできること―文章編

背景色や背景画像の指定は、HTMLでもできた部分が多いですが、より細かく指定をすることが可能になっています。

１．背景色をつける。

HTMLにおいては、bgcolorという属性で背景色をつけることができます。
この属性は、bodyとtableにしか対応していないので、HTMLでは、bodyとtable,tr,td系のタグにしか色をつけられないことになります。（だからテーブルレイアウトが主流になったんですね。と納得。）

CSSでは、background-colorで背景色をつけることが可能です。bodyやtable系のタグ以外にも背景画像をつけることが可能です。

２．背景画像をつける。

HTMLでは背景画像はbackgroundという属性でつけることができますが、この属性はbody専用のものなので、背景はページ全体にしかつけられない仕様になっています。
CSSではbackground-imageというプロパティでどこでも背景画像をつけることが可能です。

背景画像をつけた例。

３．背景画像の繰返し

背景が画像の場合、画像の表示方法を指定するbackground-repeatというプロパティがあります。値をrepeatにすると、画像が全体にしきつめられます。
また、横方向、縦方向のみに画像を繰り返すこともできます。x-repeatだとx軸方向（横）、y-repeatだとy方向（縦）のみの繰返しになります。no-repeatだと繰返しなしになります。
ここでは、background-repeat: none;を指定しています。

４．背景画像の位置固定

画像の表示位置を指定するには、background-positionを使います。

また、background-attachmentというプロパティでは、画面をスクロールしても画像が動かないように指定することも可能です。

以上、画像でできることの紹介でした。
テーブル・リスト編へ続きます。