【background-position】背景画像の表示位置を指定する

background-positionプロパティでは、背景画像の表示位置(表示開始位置)を指定することができます。 背景画像を繰り返し表示する際は、background-positionプロパティで指定した位置が基準となって繰り返しが開始されます。

位置の決め方は、横方向・縦方向の順で半角スペースで区切って数値、パーセント、もしくはleft、centerなどのキーワードで指定します。

表示位置を指定する際の起点は、ボックスのパディング領域の左上となります。 ただしbackground-attachmentプロパティなどを使用し表示位置を固定している場合は、ウィンドウ左上が起点となります。

なおbackground-positionは、background-imagebackground-repeatと一緒に使用します。

書式

  • background-position : ……… 背景画像の表示位置を指定

★:実数値+単位、パーセント、キーワード(下記参照)、inherit

実数値+単位
背景画像を表示したい横方向、縦方向の位置を半角スペースで区切って数値で指定します。例えば「10px 20px」と指定した場合は、(背景画像が表示される領域の)パディングの左から10px、上から20pxの位置に背景画像の左上が揃えられ表示されます。また値を1つだけ指定した場合は、横方向の位置を指定した事になり、縦方向には「50%(center)」が設定されます。値には、マイナスの数値も指定することが可能です。
パーセント+数値
横方向と縦方向の位置を、順に半角スペースで区切ってパーセント(割合)で設定します。値を1つだけ設定した場合は横方向の位置を指定した事となり、縦方向には「50%(center)」が設定されます。パーセント使った指定方法では、画像の位置の割合と表示領域の位置の割合とが揃えられます。例えば「0% 0%」と設定した場合ならパディングの左上と画像の左上、「100% 100%」であればパディングの右下と画像の右下、「10% 30%」であれば、パディングの左から10%、上から30%の位置に表示する背景画像の左から10%、上から30%の位置が揃えられます。またマイナスの値も指定することができます。
キーワード
横方向(left,center,right)、縦方向(top,center,bottom)の位置を半角スペースで区切ってキーワードで指定します。値を1つだけ指定した場合は、もう片方の位置が「center」となります。また指定順序は関係なく、「top・left」が0%、「right・bottom」が100%、「center」が50%を指定した場合と同様になります。

使用した時の例

.sample1 {
  background-image:url("sample.jpg");
  background-repeat:no-repeat;
  background-position: right bottom;
}

.sample1 {border: solid 1px #ccc; height:150px;}
<div class="sample1">right bottom = 100% 100% = 横 縦 となる</div>

ブラウザ上の表示例

right bottom = 100% 100% 横 縦 となる

対応ブラウザなどのデータ

初期値 0% 0% 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報