幅が可変する背景画像

通常背景画像は、タイルするか1箇所に固定表示させるものですが、ブライザーのサイズによって幅を変化させたい場合があります。

タイルであれば問題ないですが、1枚の画像では工夫が必要です。

ひとつは、このサイトのトップバナーがそれに当たります。

横幅を2000ｐｘの画像を使って、ＤＩＶ要素の背景に使用しています。

上部のバナー背景は特に工夫はしていませんが、右固定すればブラウザーを広げれば左側から隠れた部分が出てくる感じになります。

解かりやすく表示すると

DIV要素に横長の画像を配置します。

この画像の左右どちらかにサイド装飾を施しておきます。

高さは固定で横幅は90％にしています。

次に横長の画像のサイド装飾をした反対側用のサイド処理用の画像を作成して反対側に配置します。

マージンで画像とＤＩＶ要素の隙間を調整します。

これはこのページに適用されてるスタイルシートの設定の影響を排除するためです。

</div>