CSSでbckground-imageのポジションを%(パーセンテージ)で指定に関して、僕は、指定したbackground-imageの中心が、要素の横幅全体に対して指定した%が適用されると思っていましたが、そうではあり … “CSS:background-positionの%(パーセンテージ)指定” の続きを読む
CSSでbckground-imageのポジションを%(パーセンテージ)で指定に関して、僕は、指定したbackground-imageの中心が、要素の横幅全体に対して指定した%が適用されると思っていましたが、そうではありませんでした。
図を使って説明
例えば、幅1600pxの要素にbackground-imageを以下のように指定したとします。
.sample {
background-image: url(images/square.jpg);
background-size: 600px 600px;
background-position: left 70% top 0;
}
誤った認識
以下のように背景全体に対してbackground-positiionで指定した%が適用されると思っていたのですが、これは誤りです。

正しい認識
実際は以下のように、指定された背景画像の余白に対してbackground-positiionで指定した70%が適用されます。

まとめ
background-positionで%指定をするときは、指定したbackground-imageの余白に対して、%が適用される。