可変レイアウトでの背景画像

固定レイアウトか可変レイアウトかなどと巷では言われているCSSデザインですが、ボクは固定じゃないとボックス背景を載せるのは無理かと思っていました。今まではサイドの境界線を一枚の画像で処理していたのですが、今回、可変レイアウトでも境界線をつける方法を考えてみました。

やってみれば簡単で、まずbodyに左側の背景を固定で指定します。その次にbodyの中にボックスを作ります、とりあえずwrapperと名づけ、それに右側の背景を当てれば出来上がり。文章だけだとイメージがわかないのでCSSのソースもつけておきます。

body {
    background: #ffffff url(左側のイメージ) repeat-y left top;
    }
#wrapper {
    background: url(右側のイメージ) repeat-y right top;
    }