[CSS] 背景画像を画面いっぱいにしてスクロール固定する方法

LPなどを作る時に、背景画像をスクロール固定すると、単純なホームページから少しギミックの付いた面白い効果が出ることがあります。 そんな時に、悩ましいのが、画像サイズとアスペクト比（縦横の画像サイズ）と、配置ポジションです。 とあるWebサイトを作っている時に、ちょっとだけ思い悩んだので、備忘録しておきます。

デモ

%selector{ background-image: url(イメージのpath); background-size:cover; background-repeat:no-repeat; background-attachment: fixed; }

どんな効果が見込めるの？

最近のWebデザインのトレンドは、シンプルなフラットデザインで、動画などを設置するパターンが多い印象です。 背景色は白にするケースが多く、背景画像を設置すると、その上に表示する文字などが見づらくなるというデメリットも原因だと考えられます。 そこで、表示する文字など、スクロールする箇所に白背景をすることで、背景固定がより効果的にすることができます。 このブログ記事はそうした効果を表現してみましたが、トップバナーを固定背景で画面いっぱいにして、それを文字窓の後ろに配置するスクロール固定にすることで、窓からのぞき見える効果になりますね。 背景画像を動画にするとより面白い効果が狙える場合もありますが、動画の容量に注意しなければいけません。 読み込みに時間が掛かると、効果が逆効果になりかねませんからね。

技術ポイント

シンプルなCSSでの構造に見えますが、background-size:cover;を設置することで、画像のアスペクト比を保つようになり、画面いっぱいの表示を実現してくれています。 background-attachment: fixed; この命令は、safariブラウザが一番遅く導入された機能ですが、今ではスマホでもパソコンでもどのブラウザでも使うことができるので、安心して設置できます。 個人的な要望としては、stickyが使えるようになってくれるとより面白い効果がだせるのにな〜と思っています。