ホーム >>> HTML整理ノート

background-position　背景画像の位置指定

背景画像をどの位置から始めるかを指定する。デフォルトは左上座標（0,0）だが，これを変更する時に使う。
background-repeatの設定値によって影響を受ける。

書式
　background-position:値
　(値)･･･横方向／縦方向の順に半角スペースで区切って指定。
　　% 指定･･･0%は左端(上端)に、50%は中央に、100%は右端(下端)。表示領域の％位置
　　　　　と、背景画像の%位置が揃えられる。（50%の場合、表示領域の中心が画像の
　　　　　中心と一致するように配置される）
　　単位による数値指定･･･px／pt／em／cm／mmの単位で指定。指定座標と画像の左上座
　　　　　標が一致するように配置される。
　　キーワード指定
　　　　（横方向）･･･left／center／right
　　　　（縦方向）･･･top／center／bottom
　　　　　　　*　0%,50%,100%と指定しているのと同じこと

(特記)
・値を１つだけ指定･･･横方向の位置を指定したことに（縦方向は中央配置50%になる）
・%、数値、キーワードは混在してよい。
・マイナス(-)指定も可能で、この場合画像は左，上にはみ出る。

Sample
　　
「background-position: 5mm 15mm 」を設定しているが、background-repeatを設定していないと反映しない background-position:
　　5mm 15mm; 
background-repeat:no-repeat
を設定
background-position:
　　5mm 15mm; 
background-repeat:repeat-x
を設定 		 background-position:
　　5mm 15mm; 
background-repeat:repeat-y
を設定 
background-position:50% 10%; 
background-repeat:no-repeat
を設定		 background-position:right 50%; 
background-repeat:no-repeat
を設定
background-position
　　:center bottom; 
background-repeat:no-repeat
を設定		 background-position:top 15px; 
background-repeat:no-repeat
を設定
background-position:
　　-30px -5mm; 
background-repeat:no-repeat
を設定		 background-position:
　　-1.5em -30%; 
background-repeat:no-repeat
を設定

repeat-xの場合、縦方向だけが反映。repeat-yの場合、横方向だけが反映する。no-repeatの時だけ、横／縦の両方向に反映する。

Scriptプロパティ＜backgroundPosition＞

上のbackground-positionを変更する

Sample Source......................................................................>>>

<tr>
 <td style="background-position: -30px -5mm;
　　　　background-image : url(../../images/bg/tairu1.gif);
　　　　background-repeat:no-repeat"></td>
 <td id="koitu" style="background-position: -1.5em -30%
　;background-image : url(../../images/bg/tairu1.gif);background-repeat:no-repeat"></td>
</tr>
･･･（省略）･･･

<button onclick="koitu.style.backgroundPosition='center top'">center topに変更</button>
<button onclick="koitu.style.backgroundPosition='left bottom'">left bottomに変更</button>
<button onclick="koitu.style.backgroundPosition='100% 100%'">100% 100%に変更</button>
<button onclick="koitu.style.backgroundPosition='30% bottom'">30% bottomに変更</button>
<button onclick="koitu.style.backgroundPosition='-30% center'">-30% centerに変更</button>
<button onclick="koitu.style.backgroundPosition='2em'">2emに変更</button>