title: How to get a text in a fixed position like the "background-attachment: fixed"?
body: <p>I'm making a one-page website which would contain 5 different images each containing a different text, and based on the "background-attachment: fixed", I was wondering if it were possible to have the text in a fixed position. If yes, what is the code for it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.img{
  background-size: cover;
    background-position: center;
     width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .text {
      margin: auto;
    padding: 30px;
    width: 100%;
      background-color: rgba(0,0,0,0.7);
    text-align: center;
      min-width: 520px;
    max-width: 520px;
  }
  
  .img1{
    background-image: url();
  }
  
  .img2{
  background-image: url();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="img img1"&gt;
      &lt;div class="text"&gt;
  &lt;p&gt;...&lt;/p&gt;
    &lt;/div&gt;&lt;/div&gt;
  &lt;div class="img img2"&gt;
  &lt;div class="text"&gt;
  &lt;p&gt;....&lt;/p&gt;
  &lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>