img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

任意の位置に一列


背景画像を任意の位置に連続して配置

  ie6 nn7 op8

背景画像の表示場所を任意の位置に変えることができます。
タイルタイプやボーダータイプの画像を好きな場所に表示したり、画像の後ろに背景色を表示する事ができるので
画像を背景にする場合でも違ったイメージになるでしょう。

背景画像の位置は、background-position:横方向 縦方向; で、プロパティの値は1つ、または2つです。
(デフォルトの値はページの左上端、0% 0% 。)
横方向の位置を左からの距離で、縦方向の位置を上からの距離で指定します。
2つの場合 1つ目の値が横方向、2つ目の値が縦方向を指定、 1つの場合 横方向の値と解釈され、
縦方向は中央に表示されます。
指定出来るのは
横方向  left/center/right/in(インチ)/pt(ポイント)/px(ピクセル)/%(パーセント)等
縦方向  top/center/bottom/in(インチ)/pt(ポイント)/px(ピクセル)/%(パーセント)等 です。


■ 画面左側から位置指定、縦に画像一列+背景固定  sample sample sample

以下のソースを、htmlソースの<head></head>で囲まれた部分に入れて下さい。




■ 画面上段から位置指定、横に画像一列+背景固定  sample sample

以下のソースを、htmlソースの<head></head>で囲まれた部分に入れて下さい。


(上記の場合、横方向は 0% としていますが、他の単位の場合でも数値は0(ゼロ)になります。