How to Change the Background Image on Scroll Using CSS

CSS has significant power to create fantastic effects without putting any JavaScript in your code. One common technique is stacking full-height sections with different background images to create a visual change as you scroll.

How can we change the background image on scroll? It's much simpler than you think!

Let’s create a code and see the result.

Create HTML

Create seven <div> tags with the following classes:

background-image property CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Background Image on Scroll</title>
  </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>

Add CSS

Set the <span class="property">height</span> of the body to 100% and the margin to 0.
Specify the font family names with the font-family property.
Center the images with the background-position property.
Set the background-repeat property to "no-repeat" to prevent the images from repeating.
Set the background-size to "cover" to scale the images as large as possible to cover all the background area.
Add links of the images with the background-image property.
Style the content giving it a border and setting the width and height of it.
Set the position to "fixed" so as it will be fixed while scrolling.
Style the text with the color, font-weight and font-size properties.
Use the "translate" value of the transform property. The values translate(-50%, -50%) shift the element left and up by half its own dimensions to perfectly center it.
Center the content with the help of the text-align property.
Give padding to create space on all sides of an element’s content.
Add the z-index which specifies its order inside a stacking context.
Specify the left and top margin edges with the left and the top properties.
Give a background color to the content with the background-color property. We use the RGBA value.

CSS background property

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");
}
.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;
}

So, here is the final result of our code!

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

<!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>

Try it Yourself »

Example of changing the background image on scroll:

using background-attachment property example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>
          "There's nothing more beautiful than the way how the ocean refuses to stop kissing the shoreline, no matter how many times it's sent away."
        </h3>
      </div>
      <div class="fixed two"></div>
      <div class="scroll">
        <h3>
          "So that the monotonous fall of the waves on the beach, which for the most part beat a measured and soothing tattoo to her thoughts seemed consolingly to repeat over and over again."
        </h3>
      </div>
      <div class="fixed three"></div>
    </div>
  </body>
</html>

Try it Yourself »