background-position-x - 背景画像の水平方向の位置を指定

投稿日: / 更新日:

スタイルシートのbackground-position-xは、背景画像の、水平方向の位置を指定するためのプロパティです。background-position-yと併せてbackground-positionで指定できるのと、Firefoxが対応していない点から、個人的には使用を推奨しません。

サンプルコード

下記は、background-position-xを用いて、背景画像の水平方向の位置を中央に指定するためのサンプルコードです。

body {
	background-position-x: center ;
}

デモ

スタイルシートのbackground-position-xを指定した例です。分かりやすいように繰り返し表示(background-repeat)をなし(no-repeat)に指定しています。水平方向で中央に配置されているのを確認しましょう。なお、2016年2月現在、Firefoxは対応していません。

値の指定

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

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

ブラウザのサポート

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月