(cache) cssで背景画像の位置を移動しよう（background-position）

背景画像の位置を好きな位置に移動したい！って時ってありますよね。そういう時は、background-positionプロパティを使うと簡単に背景の位置を移動できます。

では、background-positionプロパティについて紹介していきますね。

※このページは「【css】背景（backgroundプロパティ）の使い方まとめ」の続きです。backgroundプロパティ全般について詳しくはそちらをご覧ください。

目次

良く使う表示位置

キーワードで位置を指定する時の注意点

背景画像の位置を指定するbackground-positionの使い方

background-positionの表示位置は、pxなどの単位付きの数値やパーセンテージ（%）、もしくはキーワードを使って指定することができます。

記述する時は、「縦方向」「横方向」の順で半角スペースで区切って指定します。値を一つしか指定しなかった場合は、縦の位置が「auto」となります。

表示開始位置の基準は、パーセンテージ（%）で指定した以外の場合「パディング領域の左上」からとなります。

書き方
background-position:横の位置縦の位置;

キーワードで位置を指定する場合

キーワードで背景画像の位置を指定する場合は、center、top、bottom、left、rightなどで指定します。ちなみにキーワードで指定する方法は、100%、50%、0%で指定するのと同じです。

横方向のキーワード	意味
center	中央に表示
left	左に寄せて表示
right	右に寄せて表示

縦方向のキーワード	意味
center	中央に表示
top	上に寄せて表示
bottom	下に寄せて表示

.example{
  background-image:url(image/img.jpg);
  background-repeat: no-repeat;
  background-position:center top; 
}

center topを使った表示例: center rightを使った例

単位付きの数値で指定する場合

背景画像が表示される開始位置を「横方向」「縦方向」の順で、数値にpxなどの単位をつけて指定します。ちなみに数値にマイナスをつける事も可能です。

.example{
  background-image:url(image/img.jpg);
  background-repeat: no-repeat;
  background-position:50px 100px; 
}

単位付きの数値を使った表示例: center rightを使った例

パーセンテージ（%）で指定する場合

背景画像が表示される開始位置を、「横方向」「縦方向」の順で「%」で指定します。

例えばbackground-position:20% 40%;とした場合は、背景画像の左から20％、上から40％の位置にある部分が、パディング領域の左から20%、上から40%の位置に配置されます。厳密にいうとこんな感じなんですが、わかりづらいですよねｗ

なので、background-position:20% 40%;ならパディング領域の左から20%、上から40%の位置から背景画像の表示が開始されるっていうふうに考えて下さい。最初はこんな感じで大丈夫です。細かい事は、そのうち慣れますｗ

.example{
  background-image:url(image/img.jpg);
  background-repeat: no-repeat;
  background-position:20% 40%; 
}

パーセンテージ（%）を使った表示例: center rightを使った例

良く使う表示位置

良く使うと思われる表示位置（左上、右下、真ん中）のそれぞれの記述の仕方を紹介します。キーワード、単位付き、パーセンテージのそれぞれの記述を書いていきますね。

※実際に使う場合は、3つの中のどれかを記述するだけで大丈夫です。

.example{ background-position:left top; }
.example{ background-position:0px 0px; }
.example{ background-position:0% 0%; }
/* 実際に使う場合は、3つの中のどれか一つのみ記述 */

表示例: 背景画像を左上に配置

.example{ background-position:right bottom; }
.example{ background-position:100% 100%; }
/* 実際に使う場合は、2つの中のどれか一つのみ記述 */

表示例: 背景画像を右下に配置

.example{ background-position:center center; }
.example{ background-position:50% 50%; }
/* 実際に使う場合は、2つの中のどれか一つのみ記述 */

※上の記述の場合、同じキーワードが重なってますが「center」とのみ記述しても大丈夫です。同じように「50％」とのみ記述してもok

表示例: 背景画像を真ん中に配置

キーワードで位置を指定する時の注意点

キーワードで背景画像の縦の位置を指定する場合、ブラウザの縦のサイズが基準となるわけではありません。あくまでもパディング領域の縦のサイズが基準となっています。

なのでbody要素の高さが背景画像の高さより低い場合は、背景画像の上部が切れて表示されることがあります。これはbody要素の上下中央の部分に背景画像の上下中央の部分が重なるためです。といってわかりづらいので、実際にどうなるか見てみましょう！

body{
  background-image:url(image/img.jpg);
  background-repeat:no-repeat;
  background-position: center;
}

<!--省略-->
</head>
<body>
</body>
</html>

画像を見るとわかるように、途中で切れちゃってますよね。これはbody要素の高さが設定されてない（高さ0）ので、途切れて表示されちゃうんです。

ちなみに、もしもbodyに要素（h1など）が存在していたとしても、ブラウザの縦中央に背景画像は表示されません。背景画像は、要素を含むパディング領域の縦中央に表示されちゃいます。で、どうやって解決するかというと、body要素の高さを「100%」に設定します。これだけです。

高さ100%にする事で、body要素の高さが常にブラウザ画面の100%になるので、背景画像が画面の縦中央に表示されるようになるというわけです。「意味不明なんだけどｗ」って時は、とりあえず下をコピペすれば背景画像を画面中央に表示できるよって事です。（bodyのheightを100%にしようってこと）

html,body{ height:100%; }
/*上記を追加する事で解決（htmlも追加）*/

body{
  background-image:url(image/img.jpg);
  background-repeat:no-repeat;
  background-position: center;
}