background-position/背景画像位置

説明

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

　又、pxや%により位置を細かく指定する事も出来ます。

構文

　background-positonプロパティの構文は以下の通りです。

background-position: 横位置 縦位置;

　横位置は以下の指定が可能です。

　縦位置は以下の指定が可能です。

　デフォルトは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との同時利用

　利用例では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で横に繰り返し表示されますが、上下は中央にセンタリングされます。

関連ページ

・ホームページ作成「ボックスのまとめ」

　背景画像だけでなく、余白、幅、枠や回り込み等、ボックスの見た目や位置を変える方法を説明しています。

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る