background-position-y - 背景画像の垂直方向の位置を指定

投稿日: / 更新日:

スタイルシートのbackground-position-yは、背景画像の、垂直方向の位置を指定するためのプロパティです。background-position-xと併せてbackground-positionで指定できます。Firefoxが対応していないことからも、わざわざこのプロパティを利用するのは推奨しません。

サンプルコード

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

body {
	background-position-y: 100px ;
}

デモ

スタイルシートのbackground-position-yを指定した例です。分かりやすいように繰り返し表示(background-repeat)をなし(no-repeat)に指定しています。垂直方向で、一番上から100pxだけオフセットをとって配置されているのを確認しましょう。2016年2月現在、Firefoxは対応していません。

値の指定

値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目説明
inherit親要素の値を引き継ぐ。例の場合、div要素のbackground-position-yには、bodyに指定された値(100px)が引き継がれる。
initialプロパティの初期値が適用される。この場合、垂直方向へのオフセット(上からの距離)は0pxとなる。
keywordsキーワードで値を指定できる。topなら上、leftなら左、rightなら右、bottomなら下、centerなら中央に寄せられる。例では右(center)を指定している。
lengthCSSで利用できる単位で、垂直方向の距離を指定できます。この例では垂直方向に上から40px、離した位置に指定しています。(単位の一覧)

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。

  • Chrome

    ●

    4+

    2010年3月

  • Firefox

    ×

    47+

    時期不明

  • Safari

    ●

    3.1+

    2008年3月

  • Ie

    ●

    5.5+

    2000年7月

  • Edge

    ●

    12+

    2015年3月

  • Opera

    ●

    15+

    2013年7月

  • Safari(iOS)

    ●

    3.2+

    2009年6月

  • Ie Mobile

    ●

    10+

    2012年6月

  • Chrome

    ●

    47+

    2015年12月

  • Android

    ●

    2.1+

    2010年1月

  • FF Mobile

    ×

    44+

    2016年1月

  • Opera Mobile

    ●

    33+

    2015年10月