もくじ
もくじ

背景画像の配置

繰り返しなしの背景画像の配置

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%

ウェブページ(Jul.2008)
聖愛中学高等学校
http://www.seiai.ed.jp/