最終更新日 2021年6月24日

background-positionプロパティ

background-positionプロパティは、background-imageで指定した背景画像の、配置領域内での位置を指定します。複数の背景画像を指定してある場合は、それぞれの画像の位置をカンマで区切って指定できます。

値は、「パーセント値」「長さ」「キーワード」の1～4個の組み合わせとなります。それぞれの値は半角スペースで区切って指定します。

値が1個の場合は、2個目の値は「center」の指定と同じです。

値が2個の場合は、水平方向の配置と垂直方向の配置です。値がパーセント値または長さの場合は、配置領域の左上から背景画像の左上までを示します。

値が3～4個の場合は、位置を表すキーワードと、そのキーワード位置からの距離を示します。なお、値が3個の場合、省略されている位置は「0」になります。

背景画像の配置領域の基準は、background-originで示されます。

CSS3での変更点

特にありません

初期値	適用先	継承
0% 0%	すべての要素	なし

値	説明
パーセント値	背景配置領域の幅または高さの相対位置と、画像の幅または高さの相対位置を合わせる。
長さ	「px」や「em」などのサイズで、水平または垂直方向の位置を指定する。
top	値が1個または2個の場合は上端を示す。それ以外は相対位置を示す基準としての上端を意味する。
right	値が1個または2個の場合は右端を示す。それ以外は相対位置を示す基準としての右端を意味する。
bottom	値が1個または2個の場合は下端を示す。それ以外は相対位置を示す基準としての下端を意味する。
left	値が1個または2個の場合は左端を示す。それ以外は相対位置を示す基準としての左端を意味する。
center	水平位置または垂直位置の数値が指定されない場合は、水平の位置が50%または垂直の位置が50%と同じ。

サンプルコード

background-position: left 10px top 15px;
background-position: right 3em bottom 10px;
background-position: 100% 100%;

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。