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