CSS【 background 】4～background-position

背景に関するプロパティの中に、画像の表示開始位置を指定するbackground-positionプロパティがあります。
今回は、background-positionプロパティについてまとめたいと思います。

背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background 】1～背景プロパティの種類とbackground-color
CSS【 background 】2～background-imageでレイヤーやグラデーションも
CSS【 background 】3～background-repeat、background-attachment
CSS【 background 】4～background-position（本ページ）
CSS【 background 】5～background-size
CSS【 background 】6～background-clip、background-origin
CSS【 background 】7～背景に関するショートハンドプロパティ

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. background-positionプロパティ

background-positionプロパティは、背景に画像を表示させる際に、画像の表示開始位置を指定するプロパティです。

background-positionプロパティで指定する値には、次のようなものがあります。

left	背景領域での横方向の左端
right	背景領域での横方向の右端
top	背景領域での縦方向の上端
bottom	背景領域での縦方向の下端
center	背景領域での横方向の真ん中、または縦方向の真ん中 （横方向50%、または縦方向50%と同じ）
%	背景領域の幅や高さと画像の幅や高さとを%で合わせる
数値	pxやemなどの単位を付けて、背景領域の端からの距離を指定 マイナスの値も指定できる

　
background-positionプロパティの値は、継承されません。
また、background-positionプロパティは、全ての要素で使用できます。

leftは背景領域や背景画像の左端、rightは右端、topは上端、bottomは下端、centerは真ん中を基準にします。

キーワードで指定する場合は、横方向のleft、right、centerのどれかと、縦方向のtop、bottom、centerのどれかを指定します。指定する順番は、どちらが先でもOKです。せる指定です。

数値で指定する場合は、背景領域の左上の角が基点となります。
背景画像の左上の角を、基点からどのくらい離すかを数値で指定します。

background-positionプロパティのデフォルト値は「0 0」です。
これは、背景領域の左上の角に、背景画像の左上の角を重ね合わせた状態です。

%や数値で指定する場合は、マイナスの値も指定できます。
マイナスの値を指定すると、次のように横方向なら左へ、縦方向なら上へずれます。

▲目次へ戻る

2. background-positionプロパティの値の数

background-positionプロパティは、1～4個の値を半角スペースで区切って指定します。

▲目次へ戻る

3. キーワードで指定

background-positionプロパティの値をキーワードで指定する場合は、キーワードによって横方向か縦方向かは明らかなので、指定する順番はどちらが先でもOKです。

複数の画像を重ねて表示する場合で、background-positionプロパティの指定は１画像分しかない場合は、全ての画像について同じ指定となります。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {margin:0; padding:0;}
div#sample p {
	width:300px;
	height:180px;
	line-height:180px;
	text-align:center;
	font-weight:bold;
	color:#000;
	margin:1em 0;
	background-color:#F9C;
	background-image:url(img/flower.jpg),url(img/purple.jpg);
	background-repeat:no-repeat;}
div#sample p:nth-child(2) {background-position:center left;}
div#sample p:nth-child(3) {background-position:center right;}
div#sample p:nth-child(4) {background-position:center;}
div#sample p:nth-child(5) {background-position:bottom right;}

<!-- HTMLファイル -->
<div id="sample">
<p>デフォルト（0 0 = left top）</p>
<p>center left</p>
<p>right center</p>
<p>center center<br></p>
<p>bottom right</p>
</div>

各画像にbackground-positionプロパティの指定をすると、それぞれ指定された位置に表示されます。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {margin:0; padding:0;}
div#sample p {
	width:300px;
	height:180px;
	line-height:180px;
	text-align:center;
	font-weight:bold;
	color:#000;
	margin:1em 0;
	background-color:#F9C;
	background-image:url(img/flower.jpg),url(img/purple.jpg);
	background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-position:bottom left, top right;}
div#sample p:nth-child(2) {background-position:center, bottom left;}

<!-- HTMLファイル -->
<div id="sample">
<p>bottom left, top right</p>
<p>center, bottom left</p>
</div>

▲目次へ戻る

4. %で指定

%で値を2つ指定する場合は、横方向→縦方向の順に指定しないといけません。
%で指定する場合は、キーワード指定と違って、値だけではどの方向の指定なのか、ブラウザが把握できないからです。

横方向は、0％で背景領域の左端と画像の左端とがちょうど重なり、100％で右端同士が重なります。
縦方向は、0％で背景領域の上端と画像の上端とがちょうど重なり、100％で下端同士が重なります。

また、%の場合はマイナスの値も指定できます。
マイナスで指定すると、横方向の場合は基点から左方向へ、縦方向の場合は基点から上方向へ移動した位置となります。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {margin:0; padding:0;}
div#sample p {
	width:300px;
	height:180px;
	line-height:180px;
	text-align:center;
	font-weight:bold;
	color:#000;
	margin:1em 0;
	background-color:#F9C;
	background-image:url(img/flower.jpg),url(img/purple.jpg);
	background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-position:0 50%}
div#sample p:nth-child(2) {background-position:50%}
div#sample p:nth-child(3) {background-position:80% 20%}
div#sample p:nth-child(4) {background-position:-80% -50%}
div#sample p:nth-child(5) {background-position:100% 100%}
div#sample p:nth-child(6) {background-position:0 100%, 100% 0}
div#sample p:nth-child(7) {background-position:50%, 0 80%}

<!-- HTMLファイル -->
<div id="sample">
<p>0 50%</p>
<p>50%（50% 50% と同じ）</p>
<p>80% 20%</p>
<p>-80% -50%</p>
<p>100% 100%</p>
<p>0 100%, 100% 0</p>
<p>50%, 0 80%</p>
</div>

background-position:80% 20%;と指定した場合は、表示される領域の左端から80％、上端から20％の位置が、画像の表示開始位置となります。

▲目次へ戻る