大した処理ではありませんが、覚えておいた方が良さそうなのでまとめ。
CSS で背景画像に設定した画像を上下左右中央揃えで表示する方法についてです。
Cordova アプリで設定した背景画像が妙に右寄りになってしまっていたので、格闘していました。
参考にさせていただいた記事はこちらから。
【css】背景画像の中央部分を常に中央配置する方法 | 初心者プログラマーのITメモ帳
http://news-sum.net/103.html
上記のサイトによると、背景画像の設定はこちらの1行で済むとのことでした。
background: url([画像パス]) center center / cover no-repeat;
とてもシンプルです！
が、これでは私は何がどのプロパティなのか、パッと見て直ぐにわからなかったので、下記のように書き直しました。
background-image: url([画像パス]); background-repeat: no-repeat; background-size: cover; background-position: center center;
最初に挙げたサンプルコードと全く同じ内容です。
行数は増えますが、後になって見返した時にはこちらの方が可読性が良いと個人的には思います。
で、私の環境では、4行目の background-position: center center; という記述が抜けてしまっていたので、こちらを追加しました。
こちらを追加後、再度アプリを実行してみたところ、改善されていました！
あとは、背景画像に使用している画像自体のトリミングがややおかしく、中央に表示したいオブジェクトが写真の中央に来ていなかったことも原因でした。
これは…きちんと確認すべきでした…。
画像の問題もありましたが、無事、背景画像を上下左右中央揃えで表示することができました！
てっきり、background-size: cover; を設定していれば上下左右中央揃えになるかと思っていたので、background-position: center center; のことを忘れていました。
きちんと調べなければダメですね。
以上、CSS で背景画像を上下左右中央揃えで表示する方法についてでした。
ご参考になれば幸いです。
