浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】背景画像を上下左右中央揃えで表示する

大した処理ではありませんが、覚えておいた方が良さそうなのでまとめ。
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 で背景画像を上下左右中央揃えで表示する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)