background-attachmentってどうやって使えば良いんだろう？背景をいい感じに固定しておしゃれなサイトを作りたいなあ。
上記のような疑問やお悩みにお答えします。
記事の信頼性
この記事は現在WEB制作会社で現役フロントエンドエンジニアをしているしのが執筆しております。
この記事を読めばbackground-attachmentの使い方についてマスター出来ますよ。
background-attachmentとは
では早速background-attachmentの使い方について見ていきたいと思います。
まずは以下のコードをご覧下さい。
See the Pen vYyRqdx by shino (@rytym0720) on CodePen.
スクロールした時に後ろの背景が固定されているのが分かりますでしょうか。
普通は背景もテキストと同じようにスクロールされていますが、background-attachmentを使うことによって上記サイトのような実装が簡単に出来ます。
これはパララックス効果、もしくはパララックス風のデザインと言います。
初学者の頃、どうやってこの様な実装が出来るのか分からなかったので記事にさせて頂きました。
ちょっと手が込んでる感じがしてオシャレなんですよね。笑
次は実際の実装について見ていきましょう。
background-attachmentの書き方
background-attachmentは以下のように記述します。
セレクタ名｛
background-image:url();
background-attachment:fixed;
｝以上です。
簡単ですよね。
適用させたいdivなどのクラス名にbackground-imageと、background-attachment:fixedとしてあげればOKです。
background-attachmentの値について
次にbackground-attachmentの値についてご説明します。
scroll（初期値）
scrollは初期値で、何も入力しないとscrollの設定となります。この場合、背景画像を固定せず、画面に合わせてスクロールさせます。
fixed
背景画像を固定します。画面がスクロールしても、背景画像はスクロールしません。
background-attachmentの値は二つしかなく、scrollではbackground-attachmentを使ってる意味がなくなってしまうので殆ど使うことはありません。
background-attacmentが使われてるサイト
最後にbackground-attachmentが使われているサイトをご紹介します。
主にPC専用ですが、是非見てみてください。特に下のポルシェのサイトは感動すると思います。
終わりに
いかがでしたでしょうか。
サイトの至る所で使い過ぎるとやりすぎ感が出ますが、ピンポイントで使うとユーザーに「おっ」と思わせることができるテクニックだと思います。
ぜひ皆さんも使ってみてくださいね。
それではまた次の記事でお会いしましょう。