【CSS】奥深いCSSの世界。background-positionは指定の単位によって原点が変わる?

本日はbackground-positionの指定に単位についてのTipsです。

ひとえにbackgroundといっても、背景としてだけでなく、backgroundプロパティを用いて画像表示などをすることもあるのではないでしょうか。

そんなときにbackground-positionプロパティは画像の位置を指定するために使用されます。

なお、そのときの値については、

  • top, right, bottom, left, center
    • オフセット値と呼ばれるもので、それぞれ名称の通り位置づけを指定します
  • px, em, %
    • 具体的に数値で指定する方法です。第一引数がTOPからの距離、第二引数がLEFTからの距離となります

それぞれを組み合わせて、background-position: top 25px;という風に使うこともできます。

タイトルの「単位によって原点が変わる」とは…

実はpxで指定した際のBackground Imageと、%で指定した際のBackgound Imageは原点が異なります。

つまり…、サンプルを見てみましょう。

See the Pen NPmWXo by Tsukasa Nagata (@nt-uni) on CodePen.0

白い箱の大きさは、それぞれ200pxの正方形となっています。

一つ目

白い箱の半分である、100pxをTOPとLEFTで設定しています。

.container{
    background-position: 100px 100px;
}

といった具合です。しかしBackground Imageは右下に位置していますね。
これはBackground Imageの原点が左上に位置しており、その点がTOPとLEFTからそれぞれ100pxに位置されるためです。

二つ目

こちらはどうでしょう。
50%という値を、TOPとLEFTで設定しています。

.container2{
    background-position: 50% 50%;
}

こちらはBackground Imageが中心に位置しています。
50%という数値は100pxに換算されるため、一つ目と同じかとおもいきや異なります。

もうお察しかと思いますが、このときBackground Imageの原点は中心にあります。
そのため、TOPとLEFTから100pxに位置されていても、中心にくるのです。

なかなか興味深いですよね。

まとめ

いかがでしたか?
Backgroundを用いたボタンの実装など、背景としてだけでなく幅広い使い道があります。Backgroundのプロパティを自由自在に扱い、より柔軟なCSSが実装できると良いですね!

参考サイト:
A Primer To Background Positioning In CSS : Adobe Dreamweaver Team Blog

フォローして続編をチェック

@universionsをフォロー