More than 3 years have passed since last update.

画像の中心を基準に表示させる方法【CSS】

Posted at 2020-06-02

#Webサイトに画像を載せるときに、画像の中心を基準に表示させる方法

Webサイトを作成するときに、指定した要素の大きさと画像の大きさが異なる場合、普通は

css

  background-size: cover;

を使って画像の大きさを要素の大きさに揃えるんですけど、これだと画像の表示される部分が左にずれる。
じゃあ画像の中心を基準にサイト上に表示させたいときはどうしたら良いか。それは次のように書けばよい。

css

  background-position: center center;

こう書くことで画像の中心を基準に表示させることができる。1つ目のcenterが左右を表し、2つ目のcenterが上下を表している。
これは、

css

  background-position: center;

と省略して書くことも可能。