スクロールしても背景画像が固定されたままにする方法

デモサイト

まずはデモサイトをご覧ください

ページをスクロールしても背景画像が固定されているのが分かると思います。

では、さっそく実装する方法を解説していきます！

HTMLのコード

<div class="fixed-background background-1">
	<h1>見出し</h1>
</div>
 
<div class="scroll-background  background-color-1">
	<p>コンテンツ</p>
</div>
 
<div class="fixed-background background-2">
	<h1>見出し</h1>
</div>
 
<div class="scroll-background background-color-2">
	<p>コンテンツ</p>
</div>

「背景画像を固定するセクション」と「スクロールするセクション」を交互に配置するところがポイントです。

固定表示する要素には「.fixed-background」、スクロールする要素には「.scroll-background」というクラス名をつけました。もちろん、自分がわかりやすいように、クラス名を変えてもらっても構いません。

CSS

.fixed-background {
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
 
.background-1 {
  background-image: url(...);
}
 
.background-2 {
  background-image: url(...);
}

CSSでは、「background-attachment: fixed;」を設定することで、背景画像を固定することができます。

なので、上のソースコードでは、背景画像を固定するセクションに「background-attachment: fixed;」を指定しています。

以上です