はじめに

この記事を書いてる途中であることに気づいてしまって、この記事の構成が総崩れになってしまいました。しかし途中で書くのを放棄するのもアレなので、最後まで書いたあとにオチを話したいと思います。よければ最後までお付き合いくださいm(_ _)m

現象

div {
  background-position-x: 20%;
  background-position-y: 40%;
}

Google Chrome, Safari, Opera, IE では上記のように指定すればバックグラウンド画像の位置を指定できるのですが、なぜかFirefoxだけうまくいきません。

ディベロッパーツールで確認すると注意マークが出ているのがわかりましたが、最初は何がいけないのかわかりませんでした。

調べたら一発で解決しました（Google 先生に感謝です） Firefoxでbackground-positionが効かなかった件

~~どうやらFirefoxは background-position-x, background-position-y プロパティに対応していないみたいです。~~

このプロパティは元々IEが独自で使用していたもので、~~Firefoxはこのプロパティを実装していません。~~

background-position-x, background-position-y の代わりに background-position を使います。background-position はIE独自で作られたプロパティではなくFirefoxでも使用できます。

先ほどのCSSは以下のようにするとFirefoxでも動作します。

div {
  background-position: 20% 40%;
}

X座標の位置、Y座標の位置、の順にスペース区切りで値を指定します。

ちなみにどちらも初期値は0%なので、片方のみを指定したい場合は指定しないほうを0%とすれば良いです。

div {
  /* background-position-x: 20%; としたい場合 */
  background-position: 20% 0%;
}

~~Firefoxでも background-position-x, background-position-y が使えるようになるといいですね。~~

と、思って調べていたらなんと、Firefox 49 から background-position-x, background-position-y がサポートされるようになりました

Can I use… で調べてもちゃんとサポートされています。 background-position-x & background-position-y - Can I use…

実はFirefoxをしばらく使ってなくてCSSの確認のために開いたときに自分のFirefoxはバージョンが古くて、今回のような問題に当たりました。でも更新して再起動したら普通に動いたので、これはもしかしたら…と思って調べたら案の定新しいバージョンではサポートされていました。

これで主要ブラウザ最新版ではすべて対応したことになります。しかしまだ古いバージョンのFirefoxを使っているユーザもいるかもしれない（特にサポートされたのが49からと、かなり遅いので）です。なので、しばらくはまだ古いバージョンのFirefoxにも対応しておいたほうが良いかもしれません。