MEGUMI

超簡単!スクロールしても背景画像を固定させるCSSテクニック

Background Attacment

こんにちは、メグミです。
いや〜サボり癖が染み付いてしまったのか、久しぶりのブログ更新になってしまいました(笑)

さて、今回はとあるCSSのテクニックをご紹介したいと思います。

たまーに、画面いっぱいに表示された画像が背景にあって、スクロールしても固定されているデザインのサイトを見かけることはありませんか?

カーテンをあげるような、そんなエフェクトがおしゃれでカッコいいですよね。

実はこれ、数行のCSSを記述するだけで実装できちゃうんです。
さっそく、デモサイトと一緒に見ていきましょう!

 

デモサイト

まずは下記のデモサイトをご覧ください。

 

実装方法

HTML・ CSSをそれぞれ見ていきます。

HTML

背景画像をつけるセクションとつけないセクションを交互に配置します。

デモサイトでは固定表示する要素に「.fixed-bg」、スクロールする要素には「.scroll-bg」とクラス名を設定しました。

 

CSS

CSSで注意すべきポイントは背景画像をつけるセクションに「background-attachment: fixed」を設定することです。

デモサイトでは背景画像がコンテンツ幅いっぱいに表示されるようCSSを追加しています。

 

まとめ

超簡単にできるので、特にまとめることはないですねw

とりあえず、実装したかったら「background-attachment」プロパティの値を「fixed」にする!

と覚えておきましょー

ではでは(o´・ω・`o)ノシ