exemple de l'utilisation de la propriété background-attachment

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      html,
      body {
        height: 100%;
      }
      .wrapper {
        height: 100%;
        font-family: Helvetica, sans-serif;
        line-height: 1.5;
        word-spacing: 2px;
        letter-spacing: 0.5px;
      }
      .fixed {
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        height: 100%;
        width: 100%;
        color: #eeeeee;
        text-align: center;
        display: table;
      }
      .fixed h2 {
        display: table-cell;
        vertical-align: middle;
      }
      .scroll {
        background-color: #ffe0f6;
        padding: 10px 70px;
        color: #666666;
      }
      .one {
        background-image: url("https://images.unsplash.com/photo-1530426509291-d831d721c7b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80");
      }
      .two {
        background-image: url("https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1190&q=80");
      }
      .three {
        background-image: url("https://images.unsplash.com/photo-1521165582142-eaf4bd77b3f6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80");
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="fixed one"></div>
      <div class="scroll">
        <h3>
          "Dans la vie on ne fait pas ce que l'on veut mais on est responsable de ce que l'on est.."
        </h3>
      </div>
      <div class="fixed two"></div>
      <div class="scroll">
        <h3>
          "On passe une moitié de sa vie à attendre ceux qu'on aimera et l'autre moitié à quitter ceux qu'on aime.."
        </h3>
      </div>
      <div class="fixed three"></div>
    </div>
  </body>
</html>