Example of changing the background image with a fixed box of text on scroll:

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
        font-family: Helvetica, sans-serif;
      }
      .image {
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .one {
        background-image: url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
      }
      .two {
        background-image: url("https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80")
      }
      .three {
        background-image: url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1063&q=80")
      }
      .four {
        background-image: url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
      }
      .five {
        background-image: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
      }
      .six {
        background-image: url("https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80")
      }
      .seven {
        background-image: url("https://images.unsplash.com/photo-1543269865-96ae30571b5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80")
      }
      .content {
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff0c2;
        font-weight: bold;
        font-size: 60px;
        border: 8px solid #000000;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 270px;
        padding: 50px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="image one"></div>
    <div class="image two"></div>
    <div class="image three"></div>
    <div class="image four"></div>
    <div class="image five"></div>
    <div class="image six"></div>
    <div class="image seven"></div>
    <div class="content">W3DOCS</div>
  </body>
</html>