AP*DesignFactory

BLOG

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

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

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

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

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

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