background-position

background-positionは、背景画像の表示位置を指定するスタイルです。

解説

background-positionは、background-imageで指定した画像の表示位置について指定します。

表示位置を横位置、縦位置の順にスペースで区切って指定します。

background-positionを指定する時は同時に background-repeat:no-repeat;を指定する必要があります。

構文は以下になります。

background-position: 値;

background-positionには以下の値が指定できます。

値	説明
キーワードで指定	位置をキーワードで指定します。　left：左　right：右　top：上　bottom：下　center：中央 ※左右にも上下にも使用できます（例）左右左寄せ、上下中央寄せに表示する　⇒ background-position:left center;
割合で指定	位置を左上を起点として0%～100%の割合で指定します。（例）左から10%、上から50%の位置に表示する　⇒ background-position:10% 50%;
数値で指定	位置をpx等単位と共に数値で指定します。（例）左から100px、上から200pxの位置に表示する　⇒ background-position:100px 200px;

background-positionの初期値は0 0（left0px、top0px）です。


.sample01 {
  background-image:url('image/back01.png');
  background-position:right center;
  background-repeat:no-repeat;
}


<div class="sample01">right center</div>

right center


.sample02 {
  background-image:url('image/back01.png');
  background-position:80% 30%;
  background-repeat:no-repeat;
}


<div class="sample02">80% 30%</div>

80% 30%


.sample03 {
  background-image:url('image/back01.png');
  background-position:200px 50px;
  background-repeat:no-repeat;
}


<div class="sample03">200px 50px</div>

200px 50px