Section 6 : 背景(1)

 背景,とくに背景色は First step CSS の Section 9 で紹介したが,ここでは背景に画像を貼り込むことを中心に説明していこう。

背景画像:background-image 属性

 背景に画像を貼り込むのが background-image 属性である。background-color 属性と同じように,すべての要素に指定できる。

background-image: url((URL));

“なし”の場合はキーワード none を指定する。url(...) で画像の URL を指定する。相対指定をするときは,background-image 属性を指定するファイルの URL が基準(今見ているページの URL とは限らない)になる。URL はそのまま書いてかまわないが,必要ならば引用してよい。

 URL で指定された場所に画像があれば,それを背景色に重ねる。たとえば透過 GIF の場合,透過色に指定されている部分は背景色が現れる。もし,画像が見つからない場合は,background-image 属性で指定される画像の表示を行わずに処理を続ける。

 この属性は,継承されない

 画像ファイル“b_noise.gif”を用意して,次の例を見てみよう。

<P STYLE="background-image: url(b_noise.gif);">背景画像:background-image 属性は,すべての要素に指定できます。</P>

背景画像:background-image 属性は,すべての要素に指定できます。

 IE3  背景画像は,background-image 属性では指定できない(background 短縮属性を用いる)。

 NN4  URL は,background-image 属性を適用させようとしている HTML ファイルの URL を基準とする。

背景画像のスクロール・固定:background-attachment 属性

 background-attachment-属性は,background-image 属性で指定された背景画像を,表示領域のスクロールに伴って移動させるか,それとも固定させるかを指定する。

background-attachment: (キーワード);

 キーワードは初期値である scroll(同時にスクロールする)と fixed(固定する)がある。この属性は継承されない

 おもに <BODY> に指定し,後述する background-repeat 属性background-position 属性とあわせて,たとえばロゴをつねにブラウザの表示領域の左上あるいは中央に表示させておく,などという場合に使われる。

 キーワード fixed はサポートされていない場合もある。

 IE3  背景画像のスクロール・固定は,background-attachment 属性では指定できない(background 短縮属性を用いる)。

背景画像の敷き詰め:background-repeat 属性

 背景画像は,通常格子状に敷き詰められるが,この background-repeat 属性によって敷き詰めかたを指定できる。これは,すべての要素について指定できる。

background-repeat: (キーワード);

 キーワードは次の 4 つから指定する。

repeat
初期値。格子状に敷き詰められる。
repeat-x
画像は横方向に帯状に繰り返し表示される。
repeat-y
画像は縦方向に帯状に繰り返し表示される。
no-repeat
画像を 1 つだけ表示し,敷き詰めは行わない。

 この属性は,たとえば,画面の左端にだけ帯状の背景を表示させたいときなどに有用である。継承はされない

<DIV STYLE="background-image: url(b_gradx.gif); background-repeat: repeat-y;">
  <P>CSS では,背景についての自由度が今までの HTML より格段に増えました。</P>
  <P>background-attachment 属性は background-repeat 属性とあわせて,さまざまな背景の表現を実現します。</P>
</DIV>

CSS では,背景についての自由度が今までの HTML より格段に増えました。

background-attachment 属性は background-repeat 属性とあわせて,さまざまな背景の表現を実現します。

 background-attachment 属性と組み合わせれば,たとえばブラウザの表示領域の上部に緞(どん)帳のような背景を固定して表示させることも可能になる。

 IE3  背景画像の敷き詰めは,background-repeat 属性では指定できない(background 短縮属性を用いる)。