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の余白に対して、％が適用される。