background-position

div.test { background-position: center;}
div.test1 { background-position: left bottom;}
div.test2 { background-position: 50px 100px;}

※背景画像は以下を使用しています。確認を容易にする為、背景画像の繰り返しは無効にしています。

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: left top;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: center;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: center bottom;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: right bottom;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

『background-position』プロパティは背景画像の描画開始位置を指定できるプロパティです。背景画像を繰り返し描写するよう指定してある場合は『background-position』プロパティで設定した位置からの繰り返しが行われます。

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-position: center bottom;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

背景画像として指定されている画像そのものを基準とした描画開始位置ではなく、『background-origin』プロパティで設定された基準となる範囲を基準とした描画開始位置の設定となりますのでご注意下さい。

『background-position』プロパティは1つ、または2つの値を取ることができます。最初の値は左からの水平位置を表し、2つめの値は垂直位置を表します。

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: 20% 30%;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

水平位置を決定する値を1つだけ指定した場合、2つ目の値は『center』を指定したと仮定されます。

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: left;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

垂直位置を決定するキーワード(『top』か『bottom』)を1つだけ指定した場合、1つ目の値は『center』を指定したものと仮定されます。ただし、この記法は公式で解説がある記法ではありませんので『center top』といったように2つの値を記述した方が良いかもしれません。

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: top;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-position: bottom;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

『background-position』プロパティで背景画像の一部だけを表示するようにすると1枚の画像にも関わらず、まるで画像切り替えが行われたような表現を構築することができます。これは『CSSスプライト』と呼ばれている技術で、画像のリクエスト数を削減できる為ウェブサイトの高速化につなげることができます。

以下のサンプルで使用している画像は以下です。

<style>
    div { width: 100px; height: 100px; margin: 0 auto; background-image: url(/dics/dictionary-css/img/sample_bg2.png); background-position: left top;}
    div:hover { background-position: left bottom;}
</style>
<div></div>