背景を固定にしてスクロール
公開日：2020-10-24
更新日：2020-10-24
更新日：2020-10-24
1. 概要
background-attachment: fixed; で、
スクロールしても、背景がスクロールしないように固定します。
スクロールした際に、背景が変わらないため、裏に要素が残っているようにも見えますが、
スクロールすると、要素自体は移動しています。
スクロールしても、背景がスクロールしないように固定します。
スクロールした際に、背景が変わらないため、裏に要素が残っているようにも見えますが、
スクロールすると、要素自体は移動しています。
2. サンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML・CSS・JavaScript</title>
<style>
.section1 {
background-image: url('1.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.section2 { }
.section3 {
background-image: url('2.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.section4 { }
.section5 {
background-image: url('3.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body style="margin:0px; background-color:#000; color:#fff;">
<div class="section1" style="height:300px; padding:32px;">
<div style="height:100%; color:#000; font-size:24px; background-color: rgba(255, 255, 255, 0.8);">
背景を固定にして、スクロールしないようにしています。
</div>
</div>
<div class="section2" style="height:300px; color:#000; background-color:#fff; font-size:24px;">
要素自体は、スクロールすると移動しています。
</div>
<div class="section3" style="height:300px;"></div>
<div class="section4" style="height:300px; background-color:#fff;"></div>
<div class="section5" style="height:300px;"></div>
</body>
</html>
実行結果：
