BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
今回はランディングページなどでよく見られる「背景画像をスクロールしないようにする方法」についてご紹介いたします。

設定方法はかなり簡単なのですぐに終わってしまいます。
さくっと設定しちゃいましょう!

設定方法

設定するcssプロパティは2つ

背景画像をスクロールさせない

背景画像の表示サイズを指定する

デモHTML

See the Pen
mdRzyyq
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

説明

ボックスに指定した背景画像に「background-attachment:fixed;」を適用すると、その背景画像がスクロールしないようになります。
背景画像を固定するとページをスクロールさせたときにいつもとは違う見た目になるので、特殊効果としてよく使われます。
特にランディングページや広告ページで使用するケースが多く、ユーザーにファーストインパクトを与える効果があります。

背景画像を固定するときは、要素に「background-attachment:fixed;」を追加するだけでなく、いくつかの注意点があります。

  • 背景画像は、表示される領域よりもかなり大きめのサイズで作っておく
  • 配置「background-positionプロパティ」を「center center」として、要素の中央に背景画像を表示する

今回は説明のソースコードとしてロングハンドプロパティで記述していますが、原則としてショートハンドプロパティを使う方が好ましいです。

まとめ

いかがでしたでしょうか?
簡単かつおしゃれなデザインになるCSSですので、良かったら参考にしてみてください。