ページやボックスの背景を装飾したいとき、「ボックスの右端だけに、縦方向にずらっと任意の画像を並べる」というデザインもスタイルシートを使えば簡単に作れます。例えば、下記のボックスには、右端だけにうさぎマスコットが縦方向に繰り返し表示されています。

上記のサンプルのように、右端で縦方向にだけ背景画像を並べるには、以下のような感じでスタイルシートを書きます。

div.sample {
   background-image: url("rabbit.gif"); /* 背景画像 */
   background-repeat: repeat-y;         /* 縦にだけ並べる */
   background-position: right top;      /* 右上から描画 */
}

※上記のソースは、sampleクラスが付加されたdiv要素（<div class="sample">～</div>）を対象に装飾する場合の記述です。ページ全体を対象にするなら、body要素に対してスタイルを記述します。

ここで使っている3つのプロパティの意味は、以下の通りです。

• background-imageプロパティで背景画像を指定。
• background-repeatプロパティで、背景画像の繰り返し方向を指定。値に「repeat-y」を指定すれば縦方向にだけ繰り返されます。(「repeat-x」を指定すれば横方向のみ。)
• background-positionプロパティは、背景画像の表示開始位置を指定します。値に「right top」と指定しているので「右上」から表示が始まります。

ちなみに、background-positionプロパティの値には「right bottom」や「right center」と書いても右端の縦方向に並びます。上下方向で基準になる位置が、top(上端)になるか、center(中央)になるか、bottom(下端)になるかの違いだけです。指定する背景画像に応じて、どれが最も望ましい表示になるか試してみて下さい。

背景画像と文字が重ならないようにする

先ほどのサンプルだと、文章量が長い場合にはボックスの右端で背景画像と文字が重なってしまっています。これを解消するには、padding-rightプロパティを使って、ボックスの右端に「内側の余白」を設ければよいでしょう。

ここで使っているうさぎマスコット画像の横幅が42ピクセルなので、とりあえず50ピクセルほど余白を設けてみます。以下のようにCSSソースを記述します。

div.sample {
   background-image: url("rabbit.gif");
   background-repeat: repeat-y;
   background-position: right top;
   padding-right: 50px; /* 右端の(内側の)余白 */
}

すると、先ほどのサンプルは、以下のように表示されます。

というわけで、ボックスの右端だけに背景画像を縦方向に並べる方法の解説でした。
まあ、右端にだけ縦方向に背景画像を表示する需要があるのかどうかは分かりませんが……。(^_^;)

なお、background-positionプロパティを書かなければ、背景画像は「左上」から描画されるので、背景画像は左端にだけで縦方向に並びます。(もしくは、background-positionプロパティに値「left top」などを指定して明示的に左上から描画されるよう指定しても同じです。)

(更新日：2016年02月07日)