仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

CSSで背景画像を固定させて別の要素をスクロールした時に背景画像を切り替える

公開日:

CSS

CSSで背景画像を固定させて別の要素をスクロールした時に背景画像を切り替える

 

CSSで背景画像をブラウザのサイズ全体に固定させて表示させることができます。

そこで今回はスクロールした際に別の要素を間に入れて背景画像を切り替えてみました。

 

文章だとなかなか伝えるのが難しいですね。

サンプルを作成したので、使用方法を下記に記載します。

 

 

スクロール時に背景画像を切り替える

背景画像に使用する画像を複数用意します。

※例では2つの画像を用意しています。

 

HTML

背景画像で使用する要素とスクロールさせる要素を交互に記述します。

 

 

CSS

背景画像を表示する要素の高さとそれぞれのbackgroundの設定をします。
「background-attachment: fixed;」を指定すると背景画像を固定させることができます。

 

 

サンプル

スクロールすると固定した背景画像を切り替えて表示させることができます。

 

「スクロールした時に背景画像を切り替える」のデモページ

 

要素内にテキストを入れた場合は下記のような感じです。

 

「スクロールした時に背景画像を切り替える(テキスト)」のデモページ

 

 

まとめ

おしゃれな写真を使用するとページがいい感じの雰囲気になりますね。
WEBサイトに画像を大きく使用して表示させたい時などありかもしれません。
ブラウザのサイズで画像が表示されるので大きい画像を用意してください。

 

スタイルだけで実装することができるので、是非試してみてください。

 

※こちらPCの場合の方法です。スマートフォンでは正常に動作しないので別の対応が必要になります。

ブログ作成者3
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00