CSSリファレンス

background-positionの意味と使い方

「background-position」は背景画像の表示位置を設定します。
初期状態では、表示位置の基点はパディングボックスの左上ですが、background-originプロパティを利用すれば、ボーダーボックスやコンテンツボックスを基点の領域に指定できます。基点を変更すると、background-positionプロパティで指定した位置の処理も変わります。

値の指定方法

実数値+単位

横方向と縦方向の位置を数値で指定します。負の値も指定できます。


パーセント値

横方向と縦方向の位置の割合で指定します。この指定方法では、表示領域の位置の割合と画像の位置の割合が揃います。負の値も指定できます。


キーワード

横方向(left、center、right)と縦方向(top、center、bottom)の位置をキーワードで指定します。


関連プロパティ

  • background-image:背景画像を指定する
  • background-repeat:背景画像のリピートの仕方を指定する