CSSで背景画像をブラウザのサイズ全体に固定させて表示させることができます。
そこで今回はスクロールした際に別の要素を間に入れて背景画像を切り替えてみました。
文章だとなかなか伝えるのが難しいですね。
サンプルを作成したので、使用方法を下記に記載します。
スクロール時に背景画像を切り替える
背景画像に使用する画像を複数用意します。
※例では2つの画像を用意しています。
HTML
背景画像で使用する要素とスクロールさせる要素を交互に記述します。
|
1 2 3 4 5 6 7 8 9 |
<body> <div class="bg_fixed1"></div> <div class="scroll"></div> <div class="bg_fixed2"></div> <div class="scroll"></div> </body> |
CSS
背景画像を表示する要素の高さとそれぞれのbackgroundの設定をします。
「background-attachment: fixed;」を指定すると背景画像を固定させることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<style type="text/css"> .bg_fixed1 { height: 600px; background-image: url('sample1.jpg'); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; z-index: 1; } .bg_fixed2 { height: 600px; background-image: url('sample2.jpg'); background-size: cover; background-attachment:fixed; background-repeat: no-repeat; background-position: center center; z-index: 1; } .scroll { height: 600px; background-color: #A8B8D5; z-index: 2; } </style> |
サンプル
スクロールすると固定した背景画像を切り替えて表示させることができます。
要素内にテキストを入れた場合は下記のような感じです。
「スクロールした時に背景画像を切り替える（テキスト）」のデモページ
まとめ
おしゃれな写真を使用するとページがいい感じの雰囲気になりますね。
WEBサイトに画像を大きく使用して表示させたい時などありかもしれません。
ブラウザのサイズで画像が表示されるので大きい画像を用意してください。
スタイルだけで実装することができるので、是非試してみてください。
※こちらPCの場合の方法です。スマートフォンでは正常に動作しないので別の対応が必要になります。
ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください！
お気軽にご相談ください。
022-716-3883
営業時間 平日9:30～18:00
関連記事
Category
最近の投稿
人気の投稿
