CSS:background-positionの%(パーセンテージ)指定

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で指定した%が適用されると思っていたのですが、これは誤りです。

7対3のイメージ その1

正しい認識

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

7対3のイメージ その2

まとめ

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です