CSS3

プロパティ

background-position

[Edge]○。→● mdn

背景画像の位置決め。

このプロパティは、何枚かの背景画像が指定されている下で、各 画像の，対応する背景位置決め区画における（リサイズ後の）初期位置を指定する。

<bg-position>

＝[left | center | right | top | bottom | <length-percentage>]
| [left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>]
| [center | [left | right] <length-percentage>?] && [center | [top | bottom] <length-percentage>?]

<DIV style="border:1px solid red; width:100px; height:100px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:no-repeat;
 background-position:top;
">あ</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:no-repeat;
 background-position:top center;
">あ</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:no-repeat;
 background-position:top 30% left 80%;
">あ</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 padding:10px;
 background-image:url(Com/BG1.jpg), url(Com/BG2.jpg);
 background-repeat:no-repeat;
 background-position:top left, bottom right;
">あ</DIV>

• 値が 1 個だけ指定された下では、2 個目の値は center と見做される。
• 1 ～ 2 個の値が与えられた下での［1 個目／2 個目］の値に対する <length-percentage> は、［横／縦］の位置（またはオフセット）を表現する。ここでの <length-percentage> 値は、［背景画像の左上隅］の、［背景位置決め区画の左上隅］からのオフセットを表現する。

  注記： キーワードによるペアは順不同である一方、キーワードと［長さ／百分率］の組み合せでは，順序は入れ替えられない。したがって、center left は妥当であるが、50% left は無効になる。

• 3 ～ 4 個の値が与えられた下では、その中の各 <length-percentage> はオフセットを表現し、その起点となる辺を指定するキーワードが先行していなければならない。

  例えば background-position: bottom 10px right 20px は、［ 下辺から上へ 10px, 右辺から左へ 20px ］オフセットされた所を表現する。

  値が 3 個の場合の欠落しているオフセットは、 0 と見做される。

［正な値／負な値］は、背景位置決め区画の辺から［内方／外方］へのオフセットを表現する。

<length-percentage> ○

＝<length> | <percentage>

top

1 ～ 2 個の値が与えられた下では、縦位置に対する 0% に算出される。他の場合、その次のオフセット値の起点を上辺にする。

<DIV style="border:1px solid red; width:100px; height:100px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:no-repeat;
 background-position:top;
">あ</DIV>

<DIV style="border:10px dotted green; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-position:top;
">あ</DIV>

right

1 ～ 2 個の値が与えられた下では、横位置に対する 100% に算出される。他の場合、その次のオフセット値の起点を右辺にする。

<DIV style="border:1px solid red; width:100px; height:100px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:no-repeat;
 background-position:right;
">あ</DIV>

<DIV style="border:10px dotted green; width:80px; height:80px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-position:right;
">あ</DIV>

bottom

1 ～ 2 個の値が与えられた下では、縦位置に対する 100% に算出される。他の場合、その次のオフセット値の起点を下辺にする。

<DIV style="border:1px solid red; width:100px; height:100px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:no-repeat;
 background-position:bottom;
">あ</DIV>

left

1 ～ 2 個の値が与えられた下では、横位置に対する 0% に算出される。他の場合、その次のオフセット値の起点を左辺にする。

<DIV style="border:1px solid red; width:100px; height:100px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:no-repeat;
 background-position:left;
">あ</DIV>

center

横位置が指定されていなければ、横位置に対する 50%（すなわち left 50% ）に算出され、他の場合は、縦位置に対する 50%（すなわち top 50% ）に算出される。

<DIV style="border:1px solid red; width:100px; height:100px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:no-repeat;
 background-position:center;
">あ</DIV>

<length> ○

長さ値は、固定された長さによるオフセットを与える。例えば、値ペア 2cm 1cm に対しては、画像は、その左上隅が、背景位置決め区画の左上隅から［ 2cm 右、1cm 下］の所に位置するように置かれる。

<DIV style="border:1px solid red; width:100px; height:100px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:no-repeat;
 background-position:30% 50%;
">あ</DIV>

<percentage> ○

百分率値による［横／縦］オフセットは、［背景位置決め区画の［横幅／縦幅］から背景画像の［横幅／縦幅］を引いた結果］に相対的になる。この画像サイズは background-size にて与えられる。

例えば、値ペア 0% 0% に対しては、画像の左上隅が、通例的には（background-origin を特に指定しない限り）ボックスのパディング辺による区画の左上隅に揃えられる。

値ペア 100% 100% に対しては、画像の右下隅が、区画の右下隅に揃えられる。

値ペア 75% 50% に対しては、画像の左上隅から［75% 右、50% 下］の地点が、区画の左上隅から［75% 右、50% 下］の地点に揃えられる（下図）。

<DIV style="border:1px solid red; width:100px; height:100px;
 padding:10px;
 background-image:url(Com/BG1.jpg);
 background-repeat:no-repeat;
 background-position:30% 50%;
">あ</DIV>

background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */

background-position: bottom 10px right 3em;

テスト