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

プログラミング

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

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

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


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

デモサイト

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

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

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

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

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

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

HTML

HTMLのソースコードは以下の通りです。

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

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

CSS

続いて、CSSを見ていきましょう。

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

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

以上です!

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


最後に

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

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

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

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

コメント

タイトルとURLをコピーしました