説明
background-positionプロパティは背景画像を上下左右にセンタリングしたり、右寄せ、左寄せ、上寄せ、下寄せする設定が出来ます。

又、pxや%により位置を細かく指定する事も出来ます。
background-positonプロパティを使うと背景画像の表示位置を指定出来ます。
background-positionプロパティは背景画像を上下左右にセンタリングしたり、右寄せ、左寄せ、上寄せ、下寄せする設定が出来ます。
又、pxや%により位置を細かく指定する事も出来ます。
background-positonプロパティの構文は以下の通りです。
background-position: 横位置 縦位置;
横位置は以下の指定が可能です。
指定 | 動作 |
---|---|
left | 左寄せします。デフォルトです。 |
center | 左右中央にセンタリングします。 |
right | 右寄せします。 |
px | 左からのピクセルを50px等指定します。 |
% | 左からの位置を50%等割合で指定します。 |
縦位置は以下の指定が可能です。
指定 | 動作 |
---|---|
top | 上寄せします。デフォルトです。 |
center | 上下中央にセンタリングします。 |
bottom | 下寄せします。デフォルトです。 |
px | 上からのピクセルを50px等指定します。 |
% | 上からの位置を50%等割合で指定します。 |
デフォルトはtop、leftなので、背景画像は左上に表示されます。
background-positionでcenter topを指定した利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。又、background-repeatで繰り返し表示しないようno-repeatを指定し、分かり易さのため高さをheightで100pxに指定しています。
div {
background-image: url(test.png);
background-repeat: no-repeat;
height: 100px;
background-position: center top;
}
<div>ホームページ</div>
上記を表示すると、以下のように画像が上寄りで左右は中央にセンタリングして表示されます。
pxと%を指定した利用例は以下の通りです。
div {
background-image: url(test.png);
background-repeat: no-repeat;
height: 100px;
background-position: 10% 60px;
}
<div>ホームページ</div>
上記を表示すると以下のように点線で示した枠の幅の10%に当たる部分から、高さが60pxの所から背景画像が表示されます。
上記では元となる画像の高さが52pxあり、指定した60pxと合計すると高さで指定した100pxを越えるため、途中で画像が切れています。
利用例ではbackground-repeatをno-repeatと指定した例を示しましたが、repeat-xやrepeat-yとも併用出来ます。
repeat-xと指定し、background-positionでright centerを指定した例です。
div {
background-image: url(test.png);
background-repeat: repeat-x;
height: 100px;
background-position: right center;
}
<div>ホームページ</div>
上記を表示すると以下のようにrepeat-xで横に繰り返し表示されますが、上下は中央にセンタリングされます。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ