背景画像を指定するbackground-imageを使う際に、まず考えるのは、背景画像を指定したブロックの横幅、縦幅である。
ボタンのように横幅縦幅を固定していい場合は、width:とheight:で指定する。
少しむずかしいのは、あるセクションの背景画像のように、横幅が変化する場合である。この場合の定番処理として、min-widthを指定し(これはbody要素に付けることが多い)、背景画像をつけるセクションの高さをheight:で指定し、この領域をおおう背景画像のサイズをbackground-sizeで指定する方法である。
次のコードでは、background-sizeを100% autoにしているが、横幅は100%つまり、背景を指定したブロックと同じ幅になるが、縦幅がautoのため、元画像の縮尺を保つため、結果として横幅を短くすると、背景画像の高さが足りなくなる。
See the Pen used 100% by nakanishi (@nakanishi) on CodePen.
次のコードはこの目的を達成するために改善されたものである。
background-sizeをcoverに指定することで、画像の比率を保ったまま、対象の範囲を全て覆うように、画像サイズが変更される。positionをcenterにするのもポイントである。ただしこれは、縦幅が固定されている場合にのみ機能する。
See the Pen used cover by nakanishi (@nakanishi) on CodePen.
しかし次のようにコンテンツの量によって高さが決まるような場合にも機能する。
See the Pen used cover by nakanishi (@nakanishi) on CodePen.
画像を完全なレスポンシブにする場合は次の画像を参照。