background-attachment: fixedについて

簡単にいうとこういうことだ！

スクロールした時に、背景画像が一緒に動くか、固定されているか

ちょっと細かく

background-attachment-scroll（初期値）
背景画像を固定せず、画面に合わせてスクロールする。
background-attachment-fixed
背景画像を固定します。画面がスクロールしても、背景画像はスクロールしない。

どんな時に使うか

背景に悩んだら使いましょーーー

使用例(img背景と、白背景を交互に使う)

結果

スクロールした時に、背景が一緒に動くのと、動かない背景がいて、立体的(?)に見える

前提

• セクションが５つある（Contact usとかAbout usとかトップページとか）
• img背景が２つまたは３つ以上ある（今回は３つの場合）

手順

• 最初のセクションにimg背景を入れる

code
.section1 {
background: url(../img/○○.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

• 次のセクションに白背景を入れる

.section2 {
background-color: white;
}

• セクションごとにそれを交互にやる