почему Parralax не работает с использованием HTML CSS

Question

Я много пытался выяснить, в чем проблема. Я пытаюсь получить эффект parralax, но эффект параллакса не применяется после написания следующего кода.

Я устал по другому коду в интернете, но ничего не работает нормально.

Вот код:

.img1 {
  position: relative;
  min-height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

<div class="img1">

  <img id="home-section" src="https://i.imgur.com/ROBU0vK.png" class="img-fluid" alt="">

  <div class="ptext">
    <div class="dark-overlay">
      <div class="home-inner text-center">
        <h2 class="display-4 text-center">DIFFERENT PULSES</h2>
        <br>
        <p> HALUTZIM 26 TEL AVIV<br><br><a href="tel:+972-50-4410600">+972-50-4410600</a></p>
        <br>
        <br>
        <div class="arrow">
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
    </div>
  </div>

</div>


<section id="studio_mission">

  

    <div class="row">
      <div class="col-md-6">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore omnis molestias necessitatibus consectetur velit consequuntur dolorem eaque laboriosam odio, at eius nulla vitae amet est iure reiciendis voluptate ipsam temporibus.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, vel, culpa perferendis amet non delectus dignissimos provident possimus itaque ea eum alias consequuntur veniam modi quos illum! Earum temporibus, odit. Iure temporibus quisquam aut odit amet unde corporis eveniet recusandae ab alias illum veniam mollitia natus accusantium voluptas dolor cupiditate, sed! Distinctio aperiam recusandae dignissimos temporibus, fuga minima assumenda consequuntur dolore asperiores perferendis officia voluptates, neque vero corporis ut quas veniam magni, nesciunt itaque necessitatibus. Obcaecati provident soluta quasi delectus nihil adipisci harum laborum veniam sint saepe perspiciatis sit rem fugiat ut quos, iusto voluptate odio ab vero! Eius minima obcaecati fuga nisi laboriosam totam provident magni cupiditate. Consequuntur mollitia cum ipsum reiciendis ducimus fugit, dolor molestiae animi hic excepturi officia perferendis voluptate accusantium est tempore porro labore quae adipisci, cumque ab asperiores. Nostrum earum sed, minima est, recusandae quam sit quibusdam rem. Aliquid voluptatum laborum iusto quam expedita. Modi at est, aspernatur rerum quae voluptates totam quas, illo iure tempore quia eligendi accusantium natus amet asperiores rem quisquam inventore consectetur, repudiandae veniam earum eum distinctio nobis. Animi dolore nihil quas adipisci reiciendis sed veniam ullam ducimus excepturi. Voluptatem eos quidem distinctio sed maiores ullam! Facere necessitatibus consequatur, dolorum recusandae.
          
        </p>
      </div>

      <div class="col-md-6">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore omnis molestias necessitatibus consectetur velit consequuntur dolorem eaque laboriosam odio, at eius nulla vitae amet est iure reiciendis voluptate ipsam temporibus.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, vel, culpa perferendis amet non delectus dignissimos provident possimus itaque ea eum alias consequuntur veniam modi quos illum! Earum temporibus, odit. Iure temporibus quisquam aut odit amet unde corporis eveniet recusandae ab alias illum veniam mollitia natus accusantium voluptas dolor cupiditate, sed! Distinctio aperiam recusandae dignissimos temporibus, fuga minima assumenda consequuntur dolore asperiores perferendis officia voluptates, neque vero corporis ut quas veniam magni, nesciunt itaque necessitatibus. Obcaecati provident soluta quasi delectus nihil adipisci harum laborum veniam sint saepe perspiciatis sit rem fugiat ut quos, iusto voluptate odio ab vero! Eius minima obcaecati fuga nisi laboriosam totam provident magni cupiditate. Consequuntur mollitia cum ipsum reiciendis ducimus fugit, dolor molestiae animi hic excepturi officia perferendis voluptate accusantium est tempore porro labore quae adipisci, cumque ab asperiores. Nostrum earum sed, minima est, recusandae quam sit quibusdam rem. Aliquid voluptatum laborum iusto quam expedita. Modi at est, aspernatur rerum quae voluptates totam quas, illo iure tempore quia eligendi accusantium natus amet asperiores rem quisquam inventore consectetur, repudiandae veniam earum eum distinctio nobis. Animi dolore nihil quas adipisci reiciendis sed veniam ullam ducimus excepturi. Voluptatem eos quidem distinctio sed maiores ullam! Facere necessitatibus consequatur, dolorum recusandae.
        </p>
      </div>
    </div>
  </div>

</section>

Проблема в том, что эффект парралакса нигде не появляется, что не так с моим кодом? Пожалуйста помоги Спасибо

Answer 1

проверьте мой код.Вам нужно установить изображение в качестве фона div и установить для него высоту.остальное прекрасно, что ты сделал.

.img1 {
  background-image: url("https://i.imgur.com/ROBU0vK.png");
  min-height: 300px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.ptext {
  height: 500px;
}

<div class="img1"></div>
<div class="ptext">
  <div class="dark-overlay">
    <div class="home-inner text-center">
      <h2 class="display-4 text-center">DIFFERENT PULSES</h2>
      <br>
      <p> HALUTZIM 26 TEL AVIV<br><br><a href="tel:+972-50-4410600">+972-50-4410600</a></p>
      <br>
      <br>
      <div class="arrow">
        <i class="fas fa-chevron-down"></i>
      </div>
    </div>
  </div>
</div>

Answer 2

Я думаю, что было бы лучше, если вы установите background-image для div вместо использования img внутри div.

.img1{

 background-image: url("img/bg-header.jpg");

 position: relative;
 min-height: 100%;

 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
 background-attachment: fixed;
}

То, как вы сейчас это делаете, не имеет смысла. Сначала вы должны иметь div с фоновым изображением. Ниже вы можете иметь section.