背景画像の表示パターン

今回は背景関連です。 これはスタイルシートの中でも最も重要なプロパティの1つでしょう。

使うプロパティは次の6つです。

background-color:#??????;      背景色を指定
background-image:url(./img/??);背景画像を指定
background-repeat:値；         背景画像の繰り返し方を指定
background-position:値;        背景画像の位置を指定
background-attachment:fixed;背景画像を固定する（スクロールしても動かない）
background           :上のプロパティを一括指定できる

background-repeatで使う値は4種類あります

repeat   :敷き詰める
repeat-x :横方向にだけ敷き詰める
repeat-y :縦方向にだけ敷き詰める
no-repeat:一回だけ表示する
プロパティを設定しない場合はrepeatになります。

background-positionで使う値は6種類あります

?% ?%  :表示位置を％で割り出す。0% 0%で左上、100% 100%で右下になる
○○px ××px:左から○○px、上から××pxを開始点にする
top、bottom:上端と下端
right、left:右端と左端
center:中央

使いこなすための＋α

背景関連は様々な場面で応用することができます。
簡単なテクニックを1つ紹介しましょう。

div.sample{
    background-image:url(../../img/point-s.gif);
    background-repeat:repeat-x;
    background-color:#FFFFFF;
    background-position:0% 100%;
    height:80px;
    padding-bottom:1em;
}