Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

background-position

背景画像の描画開始位置を指定できます。

サンプルコード
div.test { background-position: center;}
div.test1 { background-position: left bottom;}
div.test2 { background-position: 50px 100px;}
指定可能な値一覧
概要
数値位置を数値で指定できます。使用可能な単位は『%』や『px』などです。マイナスの値も取ることができます。『0% 0%』が初期値です。
left水平位置0%と等価です。
right水平位置100%と等価です。
top垂直位置0%と等価です。
bottom垂直位置100%と等価です。
center水平位置50%、及び垂直位置50%と等価です。
ブラウザでの表示結果

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

<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>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

『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>

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。