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

person IT

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

Advertisements

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関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント