【CSS】スクロールするときに背景画像を固定する方法｜wordpress・Elementor

最近はWEBサイトでコンテンツをスクロールしたときに、背景画像が固定されたまま表示されているコンテンツだけスクロールさせる見せ方が割と流行っています。

一見難しそうですが、とても簡単に実装できるのでここでは、スクロールするときに背景画像を固定する方法を紹介しています。

どういうの？

スクロールしたときに背景を固定する例は以下のようなものです。

CSSの設定

設定方法はとても簡単です。cssで以下の設定をします。

セレクタ {
    background-image: url('your-background-image.jpg');
    background-attachment: fixed; /* 固定する */
    background-size: cover; /* 画面サイズに合わせて拡大する */
    background-repeat: no-repeat; /* 背景画像の繰り返しを防ぎます */
    background-position: center center; /* 背景画像を中央に配置します */
    opacity: 0.4;
}

最大のポイントはbackground-attachment: fixed;です。「fixed」にすることでスクロールしたときに背景画像が固定されます。

あとは、画像がオリジナルサイズで繰り返されたりすると不格好なので、繰り返しなしにするなどレイアウトを整えます。

Elementorの場合

Elementorの場合は「背景オーバーレイ」で画像を選択して、以下のように設定します。

以上で完了です。とても簡単ですね。