背景画像のスクロールを制御する
背景画像のスクロールを抑制し、表面の文字などがスクロールしても壁紙は固定されたままの状態にする方法をご紹介致します。
方法は実に簡単で、次のように記述するだけです。
background-attachment: fixed;
これで、背景画像はスクロールしなくなります。 値「fixed」の代わりに「scroll」を指定すれば、スクロールするようになります。（何も指定しなければ、scroll が指定されたことになります。）
たったこれだけです。とっても簡単ですね。
先ほどのページでご紹介した、ウインドウ右下にマスコットを表示するような場合でも、この background-attachment プロパティを同時にしていしておく方が良いでしょう。
この指定がなければ、縦方向のスクロールバーが出るほど長いページの場合に、「下方向の限界までスクロールしないと背景画像が見えない」という状態になってしまいます。 （「ページの右下」に表示されるため。） background-attachment プロパティに fixed を指定しておけば、そのようなことを防げます。
ユーザビリティ上の注意：背景色の指定も同時に！
背景画像を指定してする際には、同時に背景色の指定も記述して下さい。
例えば、暗い色の背景画像を表示しているページでは、文字色にはおそらく明るい色（白色など）を指定しているでしょう。 ここでもし、何らかの事情で背景画像が表示されなかった場合を考えてみて下さい。 背景色の指定がない場合、多くのブラウザでは背景を白色で表示します。 ですから、「背景色が白色・文字色が明るい色」となり、文字が読めなくなってしまいます。
こういったことを防ぐためにも、背景画像を使用するときは、同時にその背景画像に近い色を背景色として指定しておきましょう。
背景色を指定する
背景色を指定するには次のように記述します。※色の指定は色名でも16進数でも構いません。
background-color: darkblue;
背景色と背景画像を同時に指定する場合には、「background-image」プロパティと「background-color」プロパティを並べて記述します。
background-image: url("sky.jpg");
background-color: skyblue;
上記の場合は、背景画像として「sky.jpg」ファイルを表示しますが、画像が表示できない場合は背景色として水色（skyblue）で表示します。
背景画像の制御に関して一括して指定する
さて、最後に、背景画像の指定や制御に関する指定を一括して行える便利な記述方法をご紹介致しましょう。
background プロパティ
このプロパティの値として、
- 色 (background-color)
- 背景画像 (background-image)
- 繰り返し (background-repeat)
- 位置 (background-position)
- 固定 (background-attachment)
の値が同時に指定可能です。
例えば、
background: #ffffff url("white.gif") right repeat-y;
のように記述すれば、white.gifという画像ファイルが背景画像になり、右側に並んで、縦方向にのみリピートすることになります。 画像が表示されない場合は、背景色として白色が表示されます。
背景色は #ffffff などの16進数での表示の他に、「 white 」などの色名でも構いません。
おわりに
さて、今回は、スタイルシートでの背景画像に関する様々な制御方法をご紹介してきました。 スタイルシートを使うと、背景画像を使ったデザインの幅が広がることがお分かりいただけたと思います。 ぜひ、みなさんのページでもご活用下さい。
【関連記事】
