Title

background positionとは

background position とはの次の2つの語句からなるプロパティです。

background

読み: バックグラウンド
意味: 背景、景色

position

読み: ポジション
意味: 位置、場所

目次に戻る

background-positionの概要

このプロパティは背景領域の表示位置を調整するために使用されます。

「調整する」ということは基準になるものが有り、その位置からの調整、または補正するということで、 その基準の位置を指定するプロパティが background-origin プロパティとなります。

これは、background-originプロパティで設定した背景の表示位置の原点からみたポジションの補正ということになるでしょう。

目次に戻る

実機サンプルとサンプルコード

構文

セレクター{background-position: 設定値}

目次に戻る

初期値: 0% 0%

このプロパティは背景に使用される画像の書き出し位置を調整することができます。 初期値の0%はbackground-originプロパティで設定された位置を基準にして、相対位置で指定します。 なお、このプロパティはbackground-repeatプロパティで画像のリピート表示をしないように設定しておかないと違いが分かりづらいです。

div{
	background-origin: padding-box;
	background-repeat: no-repeat;
	background-position: 0% 0%;
}

目次に戻る

値で位置を指定する

値を使って位置を指定する場合は%やpxなどの単位を使用します。 この例では横軸を20%,縦軸を50%の位置に画像を表示してみます。

div{
	background-origin: padding-box;
	background-repeat: no-repeat;
	background-position: 20% 50%;
}

目次に戻る

キーワードで位置を指定する

キーワードを使って位置を指定する場合は決められたキーワードを使用します。 以下にキーワードをリストアップしてみます。

• top (上詰め)
• bottom (下詰め)
• left (左寄せ)
• rigth (右寄せ)
• center (中央構え)

ここでは右下に画像を表示してみます。

div{
	background-origin: padding-box;
	background-repeat: no-repeat;
	background-position: right bottom;
}

目次に戻る

辺からのオフセットで位置を指定する

辺からのオフセットを使って位置を指定する場合は任意の辺を決め、そこからのオフセット値を指定します。 以下に使用例をリストアップしてみます。

• top 値 (上辺からのオフセット)
• bottom 値 (下辺からのオフセット)
• left 値 (左辺からのオフセット)
• rigth 値 (右辺からのオフセット)

ここでは右辺から20px,下辺から30pxの位置に画像を表示してみます。

div{
	background-origin: padding-box;
	background-repeat: no-repeat;
	background-position: right 20px bottom 30px;
}

目次に戻る

グローバル値

background-positionプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値の0% 0%に戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

background-position: 0% 0%;

background-position: top;

background-position: bottom;

background-position: left;

background-position: right;

background-position: center;

目次に戻る