背景画像を画面幅に左右されずに(レスポンシブ対応)background-imageを配置するヒント

今回、しょーごさんのコーディング課題【中級】に取り組んでいて、背景画像をレスポンシブ対応させようとしたときに、画面幅に左右されて(特に2000px以上の大きな幅)画像が動いてしまいました。

これについての対応は、確かコーディング課題【初級Ex】で解決済みでしたが、一瞬忘れてしまっていたので、備忘録がてら( ..)φメモを残しておきます。

以下は、一つの例です。ご自身の表現したい形に応じて、いろいろと変更してください。

例:画面幅40pxの背景画像を画面幅に左右されずに(レスポンシブ対応)固定配置したい。

考え方:背景画像をまず画面のちょうど中央に配置して、そこから左(または右)に10px移動させる

※10pxは一例ですので、デザインをみてどのぐらい移動する必要があるか確認してみてください。

background-position: top 100px left calc(50% + 20px + 10px);

コード解説:画面幅に左右されずに画像を配置していきたい場合は、background-positionのleft(またはright)にまず、画面中央である50%を割り当てます。すると、画像のちょうど真ん中が画面中央に配置されます。

そこから、画面中央から何px離れているのか、と考えます。ちなみに、太字である部分は合計して書いても良いです。私はあえてこう書きました。この20px、10pxの意味は「画像の左端を画面中央から10px左にずらしたい」ということです。

もっと詳しく言うと、50%を割り当てた時点で、画像が画面中央に来ています。この時、画面左端をちょうど画面中央に合わせる操作が+20px、そこからさらに左に10px移動したい操作を+10px、ということで実現しています。

このbackground-positionを%で使うと、表現の幅を広げることが出来ると思います。

この記事を書いた人