background-position - 背景画像の位置を指定

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのbackground-positionは、背景画像の位置を指定するためのプロパティです。background-position-xとbackground-position-yを同時に指定できます。

サンプルコード

下記は、background-positionを用いて、背景画像の位置を水平方向は中央、垂直方向は上から100px離すためのサンプルコードです。

body {
	background-position: center 100px ;
}

デモ

スタイルシートのbackground-positionを指定した例です。分かりやすいように繰り返し表示(background-repeat)をなし(no-repeat)に指定しています。水平方向では中央に、垂直方向では100px、上から距離が空いて表示されているのを確認しましょう。

RUN
HTML
CSS
JavaScript

body { background-position: center 100px ; background-repeat: no-repeat ; background-image: url( "/character.png" ) ; }

値の指定

background-positionには、基本的に水平方向(background-position-x)、垂直方向(background-position-y)の順にスペースで区切って2つの値を指定します。1つの値だけを指定すると、それが垂直方向、水平方向のどちらにも適用されます。指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`background-position`には、`body`に指定された値(`center 100px`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、水平方向、垂直方向ともに距離が離れない位置(要するに左上)となる。
keywords	キーワードで値を指定できる。`top`なら上、`left`なら左、`right`なら右、`bottom`なら下、`center`なら中央に寄せられる。例では水平方向は右(`right`)、垂直方向では上(`top`)を指定している。
length	CSSで利用できる単位で、水平方向、垂直方向の距離を指定できます。この例では水平方向に左から100px、垂直方向に上から30px、離した位置に指定しています。(単位の一覧)
offsets	通常、ピクセルを指定すると「左から何px」、「上から何px」という計算になります。4つの値を指定することで「右から何px」、「下から何px」といったオフセットの指定が可能になります。例えば、右から-20px、下から-50px、離れた位置に指定するには`right -20px bottom -50px`というように指定します。水平方向が`right -20px`(右から-20px)、垂直方向が`bottom -50px`(下から-50px)となります。例えば、水平方向の場合、オフセット値をプラスにすれば、基準点から左方向に離れますが、マイナスにすれば、逆に右方向に近寄ります。プラス値を設定すると画像が見えなくなってしまうのを理解しておきましょう。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

Chrome
●
-
時期不明
Firefox
●
-
時期不明
Safari
●
-
時期不明
Ie
●
-
時期不明
Edge
●
-
時期不明
Opera
●
-
時期不明
Safari(iOS)
●
-
時期不明
Ie Mobile
●
-
時期不明
Chrome
●
-
時期不明
Android
●
-
時期不明
FF Mobile
●
-
時期不明
Opera Mobile
●
-
時期不明