こんにちは。

今回の記事はHTML/CSSの「ページ全体の背景画像の設定方法」について書きたいと思います。

背景画像を固定する場合

See the Pen 背景固定あり by シミズ (@lzgbvjtv-the-sasster) on CodePen.

このように、背景画像を付けたい要素（今回はbody）にbackground-imageでURLを読み込み、bockground-sizeとbackground-positionを指定するだけです。
今回はスクロールしても背景画像を固定したいので、background-attachmentをfixed(固定)に設定しました。

background-sizeは他の値もあるのですが、レスポンシブ（スマホ）対応する場合、値をcoverに設定しておくと失敗しないかなと思います。（値をcontainにした場合、background-repeatも設定しておくと失敗しません）

背景画像を固定しない場合

See the Pen 背景固定なし by シミズ (@lzgbvjtv-the-sasster) on CodePen.

background-image、bockground-size、background-positionの３つのプロパティで実現できます。

background-sizeは他の値もあるのですが、レスポンシブ（スマホ）対応する場合、値をcoverに設定しておくと失敗しないかなと思います。（値をcontainにした場合、background-repeatも設定しておくと失敗しません）

最後に

自分の頭の中では理解しているのですが、記事にするとなると伝わってるか不安になります。

ここまで見てくれてありがとうございました。