前回は、ウェブページ全体に背景画像を指定しました。今回は、特定のボックスへの背景画像を指定してみましょう。コンテンツが表示される中央の白いボックス全体を少し立体的な表現にするために、影のような背景画像を配置してみたいと思います。部分に背景画像を設定したいので、それが分かりやすいように、画像ファイルの名前はbg_pagebody.pngとしました。bg_pagebody.pngは、サイズを横1000ピクセル×縦1ピクセルにして作成してあるので、以下に表示されているかどうか確認しづらいかもしれません。背景画像として縦方向にタイル状に繰り返して利用するので、縦1ピクセルあれば十分なのです。画像ファイル:bg_pagebody.png↓ここにある!↑画像がある!こちらのページより、サンプルサイトのファイルをダウンロードすることができます。コピーして、imagesフォルダの中に入れてください。画像ファイルの用意が出来たら、base.cssに以下のスタイル指定を追加してください。/*リンクにマウスが乗ったら背景画像を変更する*/}保存をしたらブラウザで表示してみましょう。中央の白いボックス部分に影のような背景画像が表示されれば成功です。変更前を確認する背景画像が表示されたことで左右にテキストがはみ出してしまっているような表示となっていますが、これについては後で余白を指定して調整します。はみ出した状態のままで制作を続けていきます。今回追加したCSSソースの内容を確認しておきましょう。id="pagebody">~</div>の部分だけに背景画像を表示させたいので、セレクタはdiv#pagebodyとなります。背景画像は、background-imageプロパティで指定します。スタイルを同時に指定しています。ちなみに、画像ファイルbg_pagebody.pngは、高さが1ピクセルしかありません。縦方向に繰り返して使用するので、今回のデザインの場合には1ピクセルあれば十分なのです。background-imageプロパティの値background-repeatプロパティは、背景画像のリピートの仕方を指定する際に使用します。指定できる値は、以下の通りです。適用されて、背景画像をタイル状に繰り返して表示します。