CSSで画面スクロールしても背景画像を固定表示にする方法/background-attachmentプロパティの使い方

background-attachmentは「スクロールした時に、背景画像を固定し続けるかどうか」だけを決定するプロパティで、値はscroll（流動）かfixed（固定）のふたつにひとつです。
シンプルですが、インパクトのある画面効果が作り出せます。

background-attachmentプロパティの使い方

背景画像を固定表示するかを設定
background-attachment:値

モノを見てもらったほうがわかりやすいかと思うので、下に作ります。
まず全体を包む(本来bodyやmainになる)divを用意し、これにwrapperクラスをつけて、背景画像を指定し、background-attachmentをfixedに指定します。するとどうなるか？　どうぞ。

例のアレが実装できました。divの中に置いた要素は普通にスクロールし、背景だけが固定表示となります。

/*CSS*/
.wrapper{
width:100%;
height:100vh;
background-image:url("https://sunagitsune.com/wp-content/uploads/2019/04/sailboats-2233382_1280.jpg");
background-attachment:fixed;
}

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。ちょっととっても数少ないですが、段々増える予定です。