ほんっとにはじめての HTML5 と CSS3

前回に引き続き background関連のプロパティについて。
今回は background-position プロパティで背景イメージの位置を指定します。

1. background-positionプロパティ
   1. background-positionの値は1〜4個
   2. 画像を複数使った場合の background-position の指定は？
   3. キーワードでの指定
   4. %での指定
   5. 数値でpxやemなどの単位を付けて指定
   6. マウスオーバーで画像を変化させるときに大活躍

backgroundについての記事は5回に分けています。

【15-1】background関連のプロパティ（1/4）

backgroundのプロパティと値の一覧／background-color／background-image／background-repeat／background-attachment

【15-2】background関連のプロパティ（2/4 background-position）　←今ココ

background-position

【15-3】background関連のプロパティ（3/4 background-size）

background-size

【15-4】background関連のプロパティ（4/4 clip と origin）

background-clip／background-origin

【15-5】backgroundのショートハンド まとめ

たくさんあるbackgroundのプロパティを一括でまとめられます

background-positionプロパティ

background-positionプロパティは、背景に画像を指定したときの、背景領域での画像の位置を指定します。

background-position の値
left	背景領域での x軸（横方向）の左端
right	背景領域での x軸（横方向）の右端
top	背景領域での y軸（縦方向）の上端
bottom	背景領域での y軸（縦方向）の下端
center	背景領域での x軸の真ん中、または y軸の真ん中の位置 （横方向50%、または縦方向50%と同じ）
%	背景領域の幅や高さに対して、画像の幅や高さの位置を%で合わせます （例えば50%なら、描画領域の幅や高さの50％の位置（真ん中）に、画像の幅や高さの50％の位置（真ん中）をぴったり合わせるってこと）
数値	px や em などの単位をつけて、背景領域の端からの距離を指定します。 マイナスの値も指定できます。

値の継承	なし	適用できる要素	全部

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

x軸方向の left か right か center のどちらか1コをチョイスし、y軸方向の top か bottom か center のどれかをチョイスして使います。順番は x, y どっちからでもOK。
例えば「background-position: bottom right」と指定すれば、背景領域の下端に画像の下端を合わせ、背景領域の右端に画像の右端を合わせる指定です。

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

background-position のデフォルト値は「0 0」。
これは背景領域の左上の角に、背景画像の左上の角をぴったり合わせた状態です。キーワードなら「left top」と同じ。
というわけで、background-position を指定していなければ、このように↓なります。

%や数値での指定は、マイナスの値も指定できます。
マイナスの値を指定すると、図のように x軸なら左へ、y軸なら上へずれます。

background-positionの値は1〜4個

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

値が2つのときは「x方向 y方向」の順で値を書きます。
ただし、キーワードだけの場合は順不同。例えば「bottom right」と書いてもOK。ブラウザが理解できればOKなのね。

値が1個だけなら、省略された2つめの値は「center」に決まります。

値が4個のときは「x方向の位置のキーワード　そこからの距離　y方向の位置のキーワード　そこからの距離」を表します。
「y方向の位置のキーワード　そこからの距離　x方向の位置のキーワード　そこからの距離」と x軸 y軸の順序が入れ替わってもOK。どこからの距離かブラウザが理解できればOKなので。

値が3個のときは、省略された4つめの値は「0」になります。

画像を複数使った場合の background-position の指定は？

この記事でのサンプルの背景画像は下記の2つ。
下になっているのはグリッドの画像（bg04.gif　280×160px）。グリッドは20px。

上に乗っているのはこの画像（05.jpg　260×140px）です。

それぞれ、background-repeat:no-repeat で繰り返し無しで表示しています。
（もちろんrepeatも使えますが、ここでは繰り返さないほうがサンプルとしてわかりやすいので）

画像を複数使った場合の background-positionの指定は、 それぞれの画像のポジションをカンマで区切って指定することができます。
順序はbackground-imageで指定したのと同じで、上になっている画像から指定します。

複数の画像にbackground-positionを指定した例。

p{
   background-image:url(images/bg05.jpg),url(images/bg04.gif);
   background-position:top right, bottom left}

画像が複数あっても、background-positionの指定が1画像分しか無い場合は、その指定は全部の画像に対して有効になります。

ではサンプルを順に見ていきましょう！

キーワードでの指定

キーワードでの指定は x軸方向か y軸方向か ブラウザには明確にわかるので、順番はどっちでもOK。

まずは position指定が1画像分しかない場合。複数の画像に同じ指定が効きます。

上のサンプルの HTMLです。

<div id="smp1_1">
<p>デフォルト（0 0 = left top）</p>
<p>center left</p>
<p>center right</p>
<p>center center</p>
<p>bottom right</p>
ここから↓2つの画像それぞれに位置を指定。
<p>bottom left, top right</p>
<p>top right, bottom left</p>
</div>

サンプルの CSSです。

div#smp1_1 {margin:0; padding:0;}
div#smp1_1 p {
	width:300px;
	height:180px;
	line-height:180px;  /*テキストを縦方向センターにしています*/
	text-align:center;  /*テキストを横方向にもセンターに*/
	font-weight:bold;
	color:#000;
	margin:1em 0;
	background-color:#ddd;  /*背景色は薄いグレーに*/
	background-image:url(images/bg05.jpg),url(images/bg04.gif);  /*画像を2つ*/
	background-repeat:no-repeat;}  /*リピートはしません*/
div#smp1_1 p:nth-child(2) {background-position:center left;}
div#smp1_1 p:nth-child(3) {background-position:right;}
div#smp1_1 p:nth-child(4) {background-position:center;}
div#smp1_1 p:nth-child(5) {background-position:bottom right;}
div#smp1_1 p:nth-child(6) {background-position:bottom left, top right;}
div#smp1_1 p:nth-child(7) {background-position:top right,bottom left;}

14行目は「right」だけ、15行目は「center」だけ指定しています。
2個目を省略するとその値は center になるので「right center」「center center」と指定したのと同じです。

＊ちなみに、サンプルで「p:nth-child(数字)」というセレクタを使っていますが、これは「○番目のp要素」をセレクタにする という意味の擬似クラスです。詳細は【3】id とか classって何？（セレクタの「種類」を知っておこう）をご覧ください。

%での指定

%で値が2つの場合は、値を書く順番は
「x軸（横）方向」→「y軸（縦）方向」
じゃないとダメ。
キーワードと違ってブラウザにはどっちを指示されてんのかわからないから。

x方向なら、0％で背景領域の左端に画像がくっつきます。100％なら右端に。
y方向なら、0％で背景領域の上端に、100％で下端にくっつきます。

また、%の場合はマイナスの値も指定できます。
マイナスで指定すると、x軸の場合は左方向へ、y軸の場合は上方向へ移動した位置になります。

サンプルで確認してみましょう。まずは position指定が1画像分しかない場合。

上のサンプルの CSSです。（HTMLはキーワードのサンプルと同じ構成です）

div#smp1_2 {margin:0; padding:0;}
div#smp1_2 p {
	width:300px;
	height:180px;
	line-height:180px;  /*テキストを縦方向センターにしています*/
	text-align:center;  /*テキストを横方向にもセンターに*/
	font-weight:bold;
	color:#000;
	margin:1em 0;
	background-color:#ddd;  /*背景色は薄いグレーに*/
	background-image:url(images/bg05.jpg),url(images/bg04.gif);  /*画像を2つ*/
	background-repeat:no-repeat;}  /*リピートはしません*/
div#smp1_2 p:nth-child(1) {background-position:0 50%;}
div#smp1_2 p:nth-child(2) {background-position:50%;}  /*2個目の値は省略。50%=centerなので*/
div#smp1_2 p:nth-child(3) {background-position:80% 20%}
div#smp1_2 p:nth-child(4) {background-position:-80% -50%}  /*マイナスの値もOK*/
div#smp1_2 p:nth-child(5) {background-position:100% 100%}
div#smp1_2 p:nth-child(6) {background-position:0 100%, 100% 0}
div#smp1_2 p:nth-child(7) {background-position:50%, 0 80%}

80% などの指定は、何を基準にして決めているのか、ですが。

x方向だけの図解です。
x方向0％なら背景領域の左端に画像がくっつきます。100％なら右端に。
そのときの中心点の差のなかでのパーセンテージだと思うとわかりやすいかも。
これをマイナスの値にすれば、同じ分反対方向（xなら左、yなら上）にずれるということ。

では、値が4つ（または3つ）を試してみましょう。

上のサンプルの CSSです。（HTMLは最初のサンプルと同じ構成）

div#smp1_22 {margin:0; padding:0;}
div#smp1_22 p {
	width:300px;
	height:180px;
	line-height:180px;
	text-align:center;
	font-weight:bold;
	color:#000;
	margin:1em 0;
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif);
	background-repeat:no-repeat;}
div#smp1_22 p:nth-child(1) {background-position:top 50% left;}  /*4つ目の値は省略*/
div#smp1_22 p:nth-child(2) {background-position:left 50% top;}  /*4つ目の値は省略*/
div#smp1_22 p:nth-child(3) {background-position:top 50% right 50%;}
div#smp1_22 p:nth-child(4) {background-position:right 20% top 20%;}
div#smp1_22 p:nth-child(5) {background-position:top 100% left 100%;}
div#smp1_22 p:nth-child(6) {background-position:left 0 bottom, right 0 top;}
div#smp1_22 p:nth-child(7) {background-position:left 50% top, left 70% bottom;}

値が4つのとき、4つめの値は省略すると「0」なので、0を省略できます。（13、14行目）
15行目の「top 50% right 50%」はど真ん中なので center とだけ書くこと。こんな長々と書く必要は無し。
16行目で「right 20% top 20%」と書いていますが、「left 80% bottom 80%」でも同じです。
最後の「top 100% left 100%」（16行目）も、「bottom 0 right」と書いても同じです。

数値でpxやemなどの単位を付けて指定

ピクセルやemで細かく指定したいときに便利です。
また、数値の場合もマイナスの値の指定ができます。
マイナスの数値で指定すると、x軸の場合は左方向へ、y軸の場合は上方向へ移動した位置になります。

数値での指定も %のときと同様、値が2つの場合は 値を書く順番は
「x軸（横）方向」→「y軸（縦）方向」
じゃないとダメ。ブラウザが x yどっちを指示されてんのかわからないから。

キーワードも加えて値が4つの場合、4つめが0のときは省略可。なので値3つで済みます。

サンプルを見てみましょう。

上のサンプルの CSSです。（HTMLは最初のサンプルと同じ）

div#smp1_3 {margin:0; padding:0;}
div#smp1_3 p {
	width:300px;
	height:160px;
	line-height:160px;
	text-align:center;
	font-weight:bold;
	color:#000;
	margin:1em 0;
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif);
	background-repeat:no-repeat;}
div#smp1_3 p:nth-child(1) {background-position:0 10px;}
div#smp1_3 p:nth-child(2) {background-position:2em 0;}
div#smp1_3 p:nth-child(3) {background-position:20px -50px;}
div#smp1_3 p:nth-child(4) {background-position:-40px 20px;}
/*ここからは↓値が4つ（または3つ）*/
div#smp1_3 p:nth-child(5) {background-position:right 40px bottom 10px;}
div#smp1_3 p:nth-child(6) {background-position:left 2em top;}
div#smp1_3 p:nth-child(7) {background-position:top 10px right 20px;}
div#smp1_3 p:nth-child(8) {background-position:bottom 0 right;}
/*ここからは↓2つの画像それぞれに位置を指定*/
div#smp1_3 p:nth-child(9) {background-position:left 2em top, left 0 bottom -20px;}
div#smp1_3 p:nth-child(10) {background-position:left -50px bottom, 40px -50px;}

画像が複数あっても位置指定を1画像分しか指定しない場合は全画像に同じ指定が効いているのがわかりますね（13〜16行目と18〜21行目）

＊マイナスの値を利用したサンプルが「はじめてのHTML」の過去の記事にありますので、こちらも見てみてください。サイトの背景画像をマイナスの値で配置しています。
　[13-2] サイトの背景に画像を表示しよう（CSS使用）

マウスオーバーで画像を変化させるときに大活躍

background-positionは、画像を使ったメニューボタンなどで、マウスオーバーで画像を変えたい時などに便利です。マイナスの数値も大活躍です。
サンプルをマウスオーバーしてみてください。

• APPLE
• ORANGE
• PEACH
• PEAR

上のサンプルの HTMLです。

<ul id="smp1_4">
  <li><a href="#">APPLE</a></li>
  <li><a href="#">ORANGE</a></li>
  <li><a href="#">PEACH</a></li>
  <li><a href="#">PEAR</a></li>
</ul>

CSSです。

ul#smp1_4 {margin:0; padding:0}
ul#smp1_4 li {margin:0.2em 0; list-style:none}
ul#smp1_4 li a {
	width:130px;
	height:40px;
	line-height:40px;
	text-indent:40px;  /*テキストがイラストにかぶるのを避けてます*/
	font-weight:bold;
	font-size:150%;
	color:#000;
	display:block;
	background-color:#fff;
	background-image:url(images/bg07.png);  /*ここで画像を指定*/
	background-repeat:no-repeat}  /*画像は繰り返し無しで*/
ul#smp1_4 li a:hover,
ul#smp1_4 li a:focus,
ul#smp1_4 li a:active {
	text-decoration:none;
	color:#C00}
/*ul#smp1_4 li:nth-child(1) a {background-position:0 top} デフォ*/
ul#smp1_4 li:nth-child(2) a {background-position:0 -40px}
ul#smp1_4 li:nth-child(3) a {background-position:0 -80px}
ul#smp1_4 li:nth-child(4) a {background-position:0 bottom}
ul#smp1_4 li:nth-child(1) a:hover {background-position:-130px top}
ul#smp1_4 li:nth-child(2) a:hover {background-position:-130px -40px}
ul#smp1_4 li:nth-child(3) a:hover {background-position:-130px -80px}
ul#smp1_4 li:nth-child(4) a:hover {background-position:-130px bottom}

サンプルは全部のメニューとマウスオーバーの画像を1ファイルにまとめています。
background-position を使えば このように1枚の画像で位置をずらして表示できるので便利です。

ピーチを例にとってみると、
y軸方向は通常時もマウスオーバー時もマイナス80pxの位置です（CSS 22行目と26行目）
x軸方向はマイナス130px動かせば、マウスオーバ時に表示したい画像になります（26行目）

次回予告

次回は background-size について。
background-size は、背景画像や背景グラデーションのサイズを指定します。
背景イメージを背景領域にピッタリ収めたり、好きなサイズに拡大縮小したりできます。

関連記事

• 【17-1】displayプロパティでボックスの表示形式を自由に変えよう
• （ちょっとメモ）スマホで background-attachment: fixedが効かない場合の対処法
• 【16-2】下限の min-width, min-height 上限の max-width, max-height
• 【16-1】幅の width、高さの heightプロパティ
• 【15-5】backgroundのショートハンド まとめ
• 【15-4】background関連のプロパティ（4/4　clip と origin）
• 【15-3】background関連のプロパティ（3/4　background-size）
• 【15-2】background関連のプロパティ（2/4　background-position）
• 【15-1】background関連のプロパティ（1/4）
• 【14】borderとよく似た outlineはレイアウトを崩さない
• 【13-2】border-imageと border-imageのショートハンド
• 【13-1】borderと borderのショートハンド
• 【12】paddingと paddingのショートハンド
• 【11-4】marginの相殺（margin collapsing）
• 【11-3】はみ出て便利♪ ネガティブ・マージン（Negative Margin）