背景画像位置 px→%の計算方法 | AP*DesignFactory | ホームページ制作 Wordpress LPコーディング – 東京 調布を拠点に活動する個人事業主

BLOG

背景画像位置 px→%の計算方法

html5/css3
Posted : 2018.3.17
Update : 2018.3.17
水平方向(X軸)
{%指定値} = {px指定値} / ( {背景画像を指定する要素のwidth} – {背景画像のwidth} ) * 100

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

http://qiita.com/shouchida/items/19888ee1916321e71cdb

レスポンシブデザインのコーディングは数値はなるべく%表記にしています。
その際に一番悩んだのが、背景画像の位置指定でした。

検索していたら上記サイトにバッチリ回答がありましたので、この計算方法で記述しています。