background-positionプロパティは、背景画像の初期位置を指定するプロパティです。
この初期位置の範囲は、paddingプロパティの影響を受けません。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<パーセント>｜<長さ>｜水平[left｜center｜right]｜垂直[top｜center｜bottom]｜inherit

初期値

0% 0%（左上）

適用される要素

全ての要素

継承

しません

パーセント値

margin、borderを含まないボックスと画像自身のサイズに対する割合

メディア

visual

値の解説

<パーセント>

パディングボックスの左上から何%の位置に表示するか

<長さ>

パディングボックスの左上から指定した単位（pxやem等）でどの位置に表示するか

left

左

right

右

top

上

bottom

下

center

最初に書けば左右中央、後に書けば上下中央

値は、半角スペースなどの空白類文字で区切って書きます。
topやleftなどキーワードで書いた場合は逆になる事も有りますが、基本的に最初に書いた値が水平方向の位置を指定して、後から書いた値が垂直方向の位置指定になります。
また、キーワードの指定が1つの場合、省略した値はcenterになります。

background-positionのサンプル

ul {
  margin: 20px;
}

ul li {
  list-style-type: none;
}

ul li a {
  background-image: url(../img/item/mark_cursor_w.gif);
  background-repeat: no-repeat;
}

ul.example01 li a {
  padding-left: 15px;
  background-position: 0% 50%;
}

ul.example02 li a {
  padding-right: 15px;
  background-position: right .4em;
}

<ul class="example01">
<li><a href="/">background-positionのサンプル</a></li>
</ul>

<ul class="example02">
<li><a href="/">background-positionのサンプル</a></li>
</ul>

2つ目のリストのように、キーワードと単位などを組み合わせて指定する事も可能です。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

• background-positionのサンプル

• background-positionのサンプル