スクロール時に背景画像を切り替える
css
サンプルはこちら
HTML
背景画像で使用する要素とスクロールさせる要素を交互に記述します。
<div class="bg_fixed1"></div> <div class="scroll"></div> <div class="bg_fixed2"></div> <div class="scroll"></div>
CSS
背景画像を表示する要素の高さとそれぞれのbackgroundの設定をします。
「background-attachment: fixed;」を指定すると背景画像を固定させることができます。
.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; }