XHTML/CSS・トップ | CSSプロパティ・目次

●背景画像の並べ方と位置

 background-repeat は背景画像の並列とその位置を指定するプロパティです。値には repeat、repeat-x、repeat-y、no-repeat が使えます。背景画像を普通に配置すると"background-repeat: repeat"を指定したときと同ように背景画像がページ全体(body要素)に繰り返し表示されます。ここでは"background-repeat"の値に repeat-y を使って、解説しています。(y は座標平面上の y 軸方向の意味とすれば覚えやすいかと思います。)また、背景画像を指定したすべての要素に適用できます。


【CSS】

body {
 background-color: #000000;
 background-image: url(a002ani.gif);
 background-repeat: repeat-y;
 color: #ffffff;
}

【解説】↓

 background-colorは背景色を background-imageは背景画像を background-repeatは背景画像の並べ方とその位置を colorはページ全体のテキスト色をそれぞれ指定するプロパティです。background-repeatの値に"repeat-y"を指定することにより、画面左端の縦1列に"a002ani.gif"という画像を繰り返し表示させています。"a002ani.gif"は筆者の手元にある作成ソフトに付いていた素材集のアニメーション画像を使いました。(アニメーション画像は動くことを別にすれば普通の画像と変わりはありません。)


【応用】↓

 上記の方法でも構いませんが、backgroundプロパティを使って指定することもできます。backgroundは背景関係をまとめて指定するプロパティです。背景関係のプロパティの値を半角スペースで区切り、複数指定することができます。(関連ページ参照)

body {
 background: #000000 url(a002ani.gif) repeat-y;
 color: #ffffff;
}


【参照】

背景画像の並べ方と位置関係
解説
repeat 画面一杯に敷き詰められる
repeat-x 画画上部の横一列に表示
repeat-y 画面左端の縦一列に表示
no-repeat 画面の1個所のみ表示

【補足】

 background-repeatの値に"no-repeat"を指定すると画面左上の隅に背景画像がひとつだけ表示されます。また、"background-position"のプロパティを追加することにより、そのひとつの背景画像を画面の任意の場所に配置することもできます。(background-positionのプロパティについては別項を参照。)


■関連ページ

XHTML/CSS・目次 | 背景・目次

Copyright (C) 2005-2007 http://www.xml.vc/