初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL6. 背景に関する設定　その2 ★ 背景画像の表示方法

１．繰返し方法の指定

background-repeat: <値>;

繰返し方法を指定するプロパティ「background-repeat:」に対応する<値>は、以下の4つとなります。

repeat （デフォルト）	no-repeat
repeat-x	repeat-y

２．背景画像の固定

background-attachment: scroll; ... 画面のスクロールに応じて移動する （デフォルト）

background-attachment: fixed;  ... 画面がスクロールしても背景は動かない

通常、背景は画面がスクロールするのに応じて一緒に動きますが、これを固定してテキストなどの内容部分だけをスクロールすることもできます。これは「ウォーターマーク」と呼ばれている手法です。どんな風になるのか見たい方はこちらをクリックしてみて下さい。ただし、背景画像の固定はIE以外のブラウザでは反映されない場合があるので注意が必要です。Netscape では6.2以降での対応となります。

３．背景画像の位置

「background-repeat」で「no-repeat」、つまり画像を1枚のみ画面上で表示するように設定している場合、その画像の表示位置を詳細に指定することができます。「repeat-x」や「repeat-y」の時にも指定することはできますが、それぞれ必ず横、もしくは縦方向へ一列敷き詰められることになりますので、最初の画像の開始地点が数値によって移動するのみになります。これについては、こちらを参考にして頂くとして、まず「no-repeat」での詳細設定から解説してゆきます。

background-position: <起点からx(横)方向への幅> <起点からy（縦）方向への幅>;

起点とは画面の左上を指し、それぞれの<値>は、「数値+単位」、「%」、「top、center、bottom、left、right」で指定します。「数値+単位」、「%」は混用できますが、これに「top、center、bottom、left、right」を混ぜて指定することはできません。また、<値>を1つしか指定しなければ、どの場合もx(横)方向への指定と解釈され、y（縦）方向は自動的に50%の位置に表示されます。（スタイルシートで使用できる単位については、「Column7.スタイルシートと単位」を参照して下さい。）

なお、背景画像の位置指定はIE以外のブラウザでは反映されない場合があるので注意が必要です。Netscape では6.2以降での対応となります。

�@）「数値+単位」で指定

ex1. background-position: 30px 50px;

この数値は、背景画像の左上の座標を表しています。例えば、ex1.では、画面の左上を起点としてx（横）方向へ30px、y（縦）方向へ50pxの地点に画像の左上がくるということになります。

また、以下の例のように数値をひとつだけ書き込んだ場合は、この値はx(横)方向への指定と解釈され、y（縦）方向は自動的に50%で表示されます。この時、縦方向の50%が示すのは画像左上のy地点ではなく、画像の中心点であることに注意して下さい。つまり、この例では画像は左から30pxで、画面上下間の中央に来るように表示されるということです。

ex2. background-position: 30px;

�A）「%」で指定

「%」で指定すると、それぞれの<値>は画面上で以下のように表示に反映します。「数値+単位」で指定した時は<値>が常に画像左上の座標を示しましたが、「%」で指定すると図のようにポイントとなる座標の位置は<値>に応じて変化することに注意して下さい。「%」の値が詳細になると、図に示した位置を標準として、<値>に応じて画像の表示位置が移動します。<値>を1つしか指定しなかった場合はx(横)方向への指定と解釈され、y（縦）方向は自動的に50%で表示されます。

�B）キーワードで指定

 x（横）方向へは「left、center、right」、 y（縦）方向へは「top、center、bottom」 いずれかのキーワードで各<値>を指定することもできます。「top、left」は「0%」、「center」は「50%」、「right、bottom」は「100%」と指定したのと同じ位置に画像が表示されます。<値>を1つしか指定しなかった場合はx(横)方向への指定と解釈され、y（縦）方向は自動的に50%の位置に表示されます。

★「repeat-x」「repeat-y」の場合★

「background-position:」の指定は、「background-repeat:」が「repeat-x」の時はy方向の指定のみが反映され、「repeat-y」ではx方向のみが反映されます。それぞれ横、縦の幅いっぱいに敷き詰められる性質上、「repeat-x」のx方向への起点は常に0であり、「repeat-y」ではy方向の基点が常に0であるからです。従って「background-position:」で指定された<値>は、場合に応じて無視されたり、解釈が複雑になったりしますので、実際の表示にどう反映するかはその都度注意が必要です。

「repeat-x」「repeat-y」の時に「background-position:」を指定すると、

それぞれ最初の画像の開始される座標のy地点、x地点のみが反映される。

なお、IEでは「background-position:」を特に、「background-position-x:」、「background-position-y:」という個別のプロパティを使って明確に指定することができますが、このプロパティには対応していないブラウザもあります。また、この場合も「repeat-x」の時は「background-position-y:」、「repeat-y」の時は「background-position-x:」のみしか反映されないのは「background-position:」で指定した時と同じです。<値>の指定方法も、それぞれ「background-position:」での指定方法に準じます。

初級篇2.VOL.6. 背景に関する設定・その1 <<

>> 初級篇2.VOL.6. 背景に関する設定・その3