16.4.9 背景の色と画像

ここでは背景色・背景画像の指定について説明します．HTMLのみに頼った記法では背景色・背景画像はbody要素全体に一律指定することしかできませんでしたが，CSSを使うと全ての要素に対して個別に指定することができるようになります．CSSを用いる事の利点の一つに，このようなスタイル指定の細かさがあります．

背景色の指定

CSSでは，各要素ごとに背景色を指定することができます．それには background-color プロパティを使います．

例:

<div style="background-color:gray">背景をグレーにしました．</div>

背景をグレーにしました．

これを利用して，白抜きなどもできます．

例:

<div style="background-color:black;color:white;">白抜き</div>

白抜き

もちろん，body要素に対してこのプロパティを指定すれば，全体の背景色を変えることができます．

背景色の指定方法は font-color プロパティと同様です．(16.4.7 文字の装飾)

背景画像の指定

背景には色の他に，画像を指定することもできます．例として，次の画像を使います．

bg.gif

背景を指定するには，background-imageプロパティを用います．

例:

<div style="background-image:url('bg.gif') ;">背景を格子模様にしました．</div>

背景を格子模様にしました．

値には背景画像のurlを，url(" ")の中に記述します．このときクオーテーションは'でも"でも良いのですが，上の例ではstyle属性を書くときに"を使っているので，'としています．

背景画像の表示位置を調整するには，background-position プロパティを使います．

例:

body{ background-image:url("bg.gif") ; background-position:center bottom; }
body{ background-image:url("bg.gif") ; background-position:20% 30%; } /* 垂直位置・水平位置の順 */

値の指定は top,center,bottom と left,center,right を繋げて書く方法と，垂直位置・水平位置の順に数字で指定する方法があります．数字で指定する場合は，親要素の長さに対する割合を%で指定するか，16.4.12 補足(1) 長さの指定方法で説明する方法で指定します．

また，背景の繰り返し方を指定することもできます．background-repeat プロパティの値でrepeat-xを指定すると横方向の繰り返しのみ，repeat-yを指定すると縦方向の繰り返しのみになります．繰り返しをしないときは，no-repeatを指定します．

例:

<div style="background-image:url('bg.gif') ; background-repeat:repeat-x;">横方向のリピート</div>
<div style="background-image:url('bg.gif') ; background-repeat:repeat-y;">縦方向のリピート</div>

横方向のリピート

縦方向のリピート

背景のスクロール

普通ウェブブラウザのスクロールバーを動かすと背景も一緒に動きますが，background-attachment プロパティの値をfixedにすると背景を動かさないようにすることができます．

例:

body{ background-image:url("bg.gif"); background-attachment:fixed; }