background-position の指定をすると、1個の画像を上下左右に貼り付けられます。
古いブラウザでは指定どおりいきません。
body {
background-color : #ffffff;
background-image : url(images/bgimgtl1.png);
background-repeat: no-repeat;
background-position:right bottom;
}
あわせて次のように書くこともできます。
body {background:#ffffff url(images/bgimgtl1.png) no-repeat right bottom;}
とりうる値は
横方向が left, center, right
縦方向が top, center, bottom
また、% や px も使うことができます。
ただし、上と左ははっきりしていますが、右や下はウィンドウの大きさがまちまちなのでブラウザの設計者の解釈が一定でなく、ブラウザによっては期待通りにいかない場合があります。
たとえばページが大きくてスクロールが必要な時に、右下は現在の右下か、スクロール後の右下かといったような問題です。
left top | center top | right top |
left center | center center | right center |
left bottom | center bottom | right bottom |
0% 0% | 20% 80% | 100% 100% |