スタイルシートで背景画像を操れ！その１　～繰り返し背景画像を表示させるには～

繰り返し画像を表示させたい！

　スタイルシートでの背景画像の設定は、ＨＴＭＬタグと比べて非常に自由度が高く、活用の仕方によってはバリエーションに富んだ個性的なデザイン・レイアウトを実現することができます。

　背景画像を繰り返し表示させるには、まず「background-image」プロパティで画像のＵＲＬを指定します。今回は右側のネコにご登場いただきます。

　次に、「background-repeat」プロパティで画像を繰り返す方向を決めます。このプロパティを指定しない場合は、縦方向、横方向すべてに画像が繰り返し表示されます（デフォルト）。

　左からデフォルト（全方向）、「repeat-x」（横方向）、「repeat-y」（縦方向）。１個だけ表示する方法は「背景画像を操れ！その２」で。

繰り返しの開始位置を動かしたい！

　「background-position」プロパティを使うと、繰り返しの開始位置を自由に決めることができます。以下のサンプルコードは、横軸方向へ一番下（ボトム/bottomから繰り返す設定の例です。

　横方向「repeat-x」には、「bottom」以外にも「top」、「center」が使えます。また、縦方向「repeat-y」には、「left」、「right」、「center」の値が使えます。

リピート無しで表示させたい！数値で指定するには？

　このページでご紹介している以外にも、背景画像を１回だけ表示させる方法や、表示位置をピクセルやパーセントで細かく調整する方法など、ＣＳＳでは非常に自由度の高い画像の配置が可能となっています。