スクロールしても背景画像固定 HTML CSS まとめ

ポイントはbackground-attachment: fixed;

CSS

#top-section {
    background-image: url("image/top_img-02.jpg");
    background-repeat: no-repeat;
//背景画像のサイズ指定
//縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
    background-size: cover;
    background-position: center top;
//背景固定
    background-attachment: fixed;
//これも大切 高さ100%の意味
    height: 100vh;
}

HTML

   <section id="top-section">
      <nav class="navbar navbar-expand-md navbar-dark">
         <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample10"
            aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
         </button>

         <div class="navbar-collapse justify-content-md-center collapse" id="navbarsExample10" style="">
            <ul class="navbar-nav">
               <li class="nav-item size20 active">
                  <a class="nav-link" href="#">HOME</a>
               </li>
               <li class="nav-item size20">
                  <a class="nav-link" href="#about-us">ABOUT US</a>
               </li>
               <li class="nav-item size20">
                  <a class="nav-link" href="#menu">MENU</a>
               </li>
               <li class="nav-item size20">
                  <a class="nav-link" href="#access">ACCESS</a>
               </li>
               <li class="nav-item size20">
                  <a class="nav-link" href="#reservation">Reservation</a>
               </li>
            </ul>
         </div>
      </nav>

      <div class="top_text_all">
         <h1 class="title">BAI PO TONG</h1>
         <p class="lead">Thai Massage</p>
      </div>
   </section>

height: 100vh;も大切

高さ100%の意味 これがないと、下記のようになってしまう。高さが担保されない