JS

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/6-6.css">

body内にHTMLを記載します。

<header id="header">
	<h1>Scroll me</h1>
</header>
<div id="container">
	<p>このエリアがスクロールすると上にかぶさります</p> 
<!--/container--></div>

CSSの書き方

#header{
	/*headerを全画面で見せる*/
	width:100%;
	height: 100vh;
	position: relative;
} 

#header:before{
	/*headerの疑似要素に背景画像を指定*/
	content:"";
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 100vh;
	background:url("../img/pict.jpg") no-repeat center;/*背景画像設定※オリジナル画像を設定してください*/
	background-size:cover;
}

#container{
	/*下のかぶさるエリアの指定*/
	position: relative;
	z-index:1;
	/*以下はレイアウトのための記述。削除可能*/
	background:#fff;
	padding:600px 0;
}