【CSS】超簡単！スクロールしても背景画像が固定されたままにする方法【プログラミング】

おはこんばんにちは！ノボルです。

ポートフォリオサイトを作ってるんだけど、背景画像をスクロールしても固定したままにする方法ってないの？

簡単な方法があるから解説するね！

そこで今回は、スクロールしても背景画像が固定されたままにするCSSテクニックについて解説します！

デモサイト
スクロールしても背景画像が固定されたままにする方法
最後に

デモサイト

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

出典：coils (https://coliss.com/articles/build-websites/operation/css/css-alternate-fixed-scroll-backgrounds-by-codyhouse.html)

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

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

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

HTMLとCSSだけで実装できます。

HTML

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>

</div>

<p>コンテンツ</p>

</div>

</div>

<p>コンテンツ</p>

</div>

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

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

CSS

続いて、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(...);
}

.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;」を指定しています。

以上です！

思ったより簡単なんだね！

最後に

今回の記事では、スクロールしても背景画像が固定されたままにするCSSテクニックについて解説しました。

背景画像を固定することで、よりデザイン性の高いWEB制作を行うことができます。

この記事読んでくださっているあなたも、WEBサイトを作られる際は、ぜひ「background-attachment: fixed;」を活用してみてください！

最後まで読んで頂き、ありがとうございました(o^^o)