Help us understand the problem. What is going on with this article?

background-positionプロパティの「%指定値」と「px指定値」を相互変換する計算式

More than 3 years have passed since last update.

"50%" は "何px" なのか

CSSのbackground-positionプロパティには値の指定方法がいくつか用意されていますが、その中の「%指定値」と「px指定値」を相互に変換したい場合の計算式を考えてみます。

#sample { background-position: 50% 20px;}
                  ↓  ↓
#sample { background-position: ??px ??%;}

この計算に必要となる情報は

  • 背景画像を指定する要素の width / height(px値)
  • 背景画像の width / height(px値)

です。

早速ですが、それぞれの変換式は以下のようになります。

「%指定値」→「px指定値」の変換式

水平方向(X軸)
{px指定値} = ( {背景画像を指定する要素のwidth} - {背景画像のwidth} ) * {%指定値} * 0.01
垂直方向(Y軸)
{px指定値} = ( {背景画像を指定する要素のheight} - {背景画像のheight} ) * {%指定値} * 0.01

「px指定値」→「%指定値」の変換式

水平方向(X軸)
{%指定値} = {px指定値} / ( {背景画像を指定する要素のwidth} - {背景画像のwidth} ) * 100
垂直方向(Y軸)
{%指定値} = {px指定値} / ( {背景画像を指定する要素のheight} - {背景画像のheight} ) * 100

具体例

width が 1000px である <div id="sample"> に対して、
width が 300px の sample_bg.png が背景画像として指定されており、
水平方向(X軸)の background-position が 65% であるとします。

A
#sample {
    width: 1000px;
    background: url(sample_bg.png) no-repeat 65% 0;
}

この場合、"65%" の部分をpx値に変換するには以下の計算となります。

( {背景画像を指定する要素のwidth} - {背景画像のwidth} ) * {%指定値} * 0.01
= ( 1000 - 300 ) * 65 * 0.01
= 700 * 0.65
= 455

つまり、以下の指定をした場合でも同じ位置sample_bg.png が配置されることになります。

B
#sample {
    width: 1000px;
    background: url(sample_bg.png) no-repeat 455px 0;
}

「width: 1000px」「65%」という情報だけを見ると「650pxかな?」と思ってしまいますが、実際に計算してみると全く異なる数値になります。

そもそも background-position の「%指定」とは?

background-positionプロパティの「%指定」については、リファレンスサイトなどでも
「要素の左上角から **% の位置に配置される」
といった説明がされている場合がありますが、これはなかなか曖昧な表現です。
background-position: 100% 100% と指定した場合に
背景画像が要素の右下外側に飛び出してしまうかというと、そんなことはありません。

プロパティの仕様をより正確に表現すると、以下のような説明になるでしょう。

ある要素の水平方向(X軸)の background-position を "n%" と指定した場合、
その要素の水平方向 n% の座標が「基準点」となり、
背景画像は、その画像自体の水平方向 n% の座標が「基準点」と一致するように配置される。

(垂直方向の場合も同様)

わかりにくいですね。
図で表してみます。

bgp.png

この図を見ながら再度計算してみると、前述の「変換式」が妥当なものであることがわかるかと思います。

{px指定値}
= 1000 * 65 * 0.01 - 300 * 65 * 0.01
= ( 1000 - 300 ) * 65 * 0.01
= 700 * 0.65
= 455
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away