仕様

background-position<bg-position>#
一括/個別個別指定プロパティ
初期値0% 0%
適用対象すべての要素
継承なし
百分率背景の配置領域のサイズから背景画像のサイズを引いたものを参照してください。
計算値リスト、各アイテムは左上原点からのオフセット（水平および垂直）のペアであり、それぞれ計算された<length-percentage>値として与えられます
補足<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>? ]
補足<length-percentage> = <length> | <percentage>

background-position プロパティは、要素の背景画像の初期位置を設定する個別指定プロパティです。
非継承プロパティで、初期値は 0% 0% なので、省略時は 0% 0% が指定値となります。

値の数

  1. cdvSample410 > div { height: 6em; background-image: url(./sample16.png),url(./sample32.png),url(./sample.png); background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample410">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。
background-image プロパティに画像が複数組み指定してある為、background-position プロパティも同じだけ繰り返されます。

  1. background-position: top 100% left 50%, top 50% left 50%;

２組 を指定しました。ボックスの背景は、CSS3で複数のレイヤーを持つことができます。レイヤーの数は、background-image プロパティのカンマ区切り値の数によって決まります。
この例示の場合は、background-image プロパティのカンマ区切り値の数は３つです。 その結果、background-position プロパティのカンマ区切り値の数は３つ必要となります。余った分は無視され、足りない分は記述順に繰り返しで順次補足されます。
background-position: top 100% left 50%, top 50% left 50%, top 100% left 50%; として扱われます。

値の組み合わせ

  1. cdvSample400 > div { height: 6em; background-image: url(./sample.png); background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample400">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。

  1. background-position: top 100% left 50%;

値４つ を指定しました。この場合、各<length-percentage>はオフセットを表し、その前にキーワードを指定する必要があります。キーワードは、オフセットを指定するエッジを指定します。
この例示は、background-position: 50% 100%; と同じです。

  1. background-position: top left 50%;

値３つ を指定しました。この場合、各<length-percentage>はオフセットを表し、その前にキーワードを指定する必要があります。キーワードは、オフセットを指定するエッジを指定します。
この例示は、background-position: 50% 0%; と同じです。

  1. background-position: center right;

値２つ を指定しました。この場合、最初の値としての<length-percentage>は水平位置（またはオフセット）を表し、2番目の値としての<length-percentage>は垂直位置（またはオフセット）を表します。
その結果、水平位置や垂直位置の指定が重複すると無効です。
この例示は、background-position: 100% 50%; と同じです。

  1. background-position: bottom;

値１つ を指定しました。この場合、2番目の値はcenterであると見なされます。
この例示は、background-position: 50% 100%; と同じです。

<length> 値

  1. cdvSample400 > div { height: 6em; background-image: url(./sample.png); background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample400">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
輪郭線は、要素を視覚化する為に記述しています。

例
  1. background-position: 2em;
  2. font-size: 2em;

単位 em の値を指定しました。em は、font-size の計算値を用います。

例
  1. background-position: 4.8rem;
  2. font-size: 2em;

単位 rem の値を指定しました。rem は、ルート要素のfont-size の計算値を用います。
ルート要素には、font-size: 62.5%; を指定しています。

例
  1. background-position: 48px;
  2. font-size: 2em;

単位 px の値を指定しました。px は、1 ピクセルです。
(ブラウザなどの環境で文字サイズ 16px を想定しての表示例です。)

例
  1. background-position: 5vw;
  2. font-size: 2em;

単位 vw の値を指定しました。vw は、ビューポートの初期値の包含ブロックにおける幅の1%と同じです。

例
  1. background-position: 10vh;
  2. font-size: 2em;

単位 vh の値を指定しました。vh は、ビューポートの初期値の包含ブロックにおける高さの1%と同じです。

例

<percentage> 値

  1. cdvSample400 > div { height: 6em; background-image: url(./sample.png); background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample400">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。

  1. background-position: 80%;

単位 % の値を指定しました。水平オフセットのパーセンテージは、（背景の配置領域の幅 - 背景画像の幅）を基準にしています。垂直オフセットのパーセンテージは、（背景の配置領域の高さ - 背景画像の高さ）を基準にしており、画像のサイズはbackground-sizeで指定されたサイズです。

キーワード

  1. cdvSample400 > div { height: 6em; background-image: url(./sample.png); background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample400">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。

  1. background-position: left;

キーワード left の値を指定しました。leftは、1つまたは2つの値が指定されている場合は、水平位置を0％として計算します。それ以外の場合(<length-percentage>との組み合わせの場合)は、左端を次のオフセットの原点として指定します。
left を指定した場合、もう一方の値には left または right は指定できません。

  1. background-position: right;

キーワード right の値を指定しました。rightは、1つまたは2つの値が指定されている場合は、水平位置を100％として計算します。それ以外の場合(<length-percentage>との組み合わせの場合)は、右端を次のオフセットの原点として指定します。
right を指定した場合、もう一方の値には left または right は指定できません。

  1. background-position: top;

キーワード top の値を指定しました。topは、1つまたは2つの値が指定されている場合は、垂直位置を0％として計算します。それ以外の場合(<length-percentage>との組み合わせの場合)は、上端を次のオフセットの原点として指定します。
top を指定した場合、もう一方の値には top または bottom は指定できません。

  1. background-position: bottom;

キーワード bottom の値を指定しました。bottomは、1つまたは2つの値が指定されている場合は、垂直位置を100％として計算します。それ以外の場合(<length-percentage>との組み合わせの場合)は、下端を次のオフセットの原点として指定します。
bottom を指定した場合、もう一方の値には top または bottom は指定できません。

  1. background-position: bottom center;

キーワード center の値を指定しました。centerは、他に垂直位置が指定されている場合は水平位置を50％として計算します。他に水平位置が指定されている場合は垂直位置を50％として計算します。

  1. background-position: center right;

キーワード center の値を指定しました。centerは、他に垂直位置が指定されている場合は水平位置を50％として計算します。他に水平位置が指定されている場合は垂直位置を50％として計算します。

CSS全体のキーワード

値を１つのみ指定して全体に対して適用されています。１つ１つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定プロパティ(border-top-color, border-right-color, border-bottom-color, border-left-color)を使用して設定します。

  1. cdvSample470 > div { height: 4em; background-image: url(./sample.png); background-repeat: no-repeat; padding: 1em; background-position: right bottom; outline: solid 1px; }
  2. cdvSample470 > div > div { height: 5em; background-image: url(./sample.png); background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample470">
  2. <div><div style=""></div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。高さの指定は、意図的に子要素を親要素からはみ出させる事により背景の色を継承しているのか透過しているのか明確化する為に記述しています。

  1. background-position: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

  1. background-position: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。background-position プロパティの初期値は 0% 0% です。

  1. background-position: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。background-position プロパティは非継承プロパティなので初期値の 0% 0% を設定します。

サブプロパティ

  1. cdvSample400 > div { height: 6em; background-image: url(./sample.png); background-repeat: no-repeat; outline: solid 1px; }
  1. <div class="cdvSample400">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。

  1. background-position-x: right;

サブプロパティ background-position-x で値を指定しました。background-position-xは、水平位置（またはオフセット）を指定するプロパティです。
[ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#

  1. background-position-y: bottom;

サブプロパティ background-position-y で値を指定しました。background-position-yは、垂直位置（またはオフセット）を指定するプロパティです。
[ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#