背景画像の位置を指定しよう（background-position）

background-positionで背景画像の表示開始を指定できます。
表示位置は、pxなどの単位付きの数値、
もしくはパーセンテージ（%）、キーワードなどを使って指定します。

background-position:横の位置 縦の位置;

位置を記述する時は、
上のように「横方向」「縦方向」の順で半角スペースで区切って指定します。

「横方向」「縦方向」のように値を2つ書かず、
一つしか書かなかった場合は、縦の位置が「auto」になります。

表示位置の基準は「パディングの領域」の左上から始まります（％指定以外）。
ちなみに何も設定しない場合は、背景の画像は左上に表示されます。

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

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

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

では、実際使って見ると背景画像がどうなるのか見てみましょう！

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

center topを使った例

 

right centerを使った例
.example{
background-image:url(image/img.jpg);
background-repeat: no-repeat;
background-position:right center;
}

right centerを使った例

background-positionを記述したのに
背景画像が思うような位置にならないって時は、
「横」「縦」の順番に書いてない場合があるので、注意して下さいね(^^♪

background-positionをpxなどの単位付きの数値で指定する場合は、
マイナスの値も指定できます。
記述の仕方は、キーワードを指定した時と同じで
「横」「縦」の順で記述します。

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

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

なのでbody要素の高さが背景画像の高さより低い場合は、
背景画像の上部が切れて表示されることがあります。
これはbody要素の上下中央の部分に
背景画像の上下中央の部分が重なるためです。

背景画像が途切れる例css
body{
background-image:url(image/img.jpg);
background-repeat:no-repeat;
background-position: center;
}

背景画像が途切れる例html
[/head]
[body]
[/body]
[/html]

これはbody要素の高さが設定されてない（高さ0）ので、
途切れて表示されちゃうんです。

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

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

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

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

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

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

単位つきの数値を使った例
.example{
background-image:url(image/img.jpg);
background-repeat: no-repeat;
background-position:50px 100px;
}

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

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

例えば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%;
}

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

良く使う表示位置

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

背景画像を左上に配置する場合
.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つの中のどれか一つのみ記述 */