【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;
}