背景を固定にしてスクロール

公開日：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>

実行結果：

Tag

New Article