How to Change Background Images on Scroll using CSS?

How to Change Background Images on Scroll using CSS?

Last Updated : 16 May, 2024

Background images are crucial in web development, significantly enhancing the user experience. Using background images on a webpage can effectively showcase a brand or convey specific messages. Here, we will explore how to change background images on scroll using CSS.

Approach

The HTML includes a span element and three div elements with the class .bg-image and unique classes.
The span element is styled with position: fixed to keep it in a fixed position within the viewport, providing a constant reference text as the user scrolls through the background images.
The .bg-image class is defined with properties to set the background image's position, size, repeat behavior, and attachment to the viewport. This ensures each background image covers the entire viewport and remains fixed during scroll.
As the user scrolls down the page, each div with the class .bg-image takes up the full viewport height (100vh), causing the background images to change sequentially while the fixed text remains in place.

Example: The example below shows how to change background images on scroll using CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        body,
        html {
            height: 100%;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .bg-image {
            height: 100vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 1.5em;

        }

        span {
            position: fixed;
            top: 30vh;
        }

        .img1 {
            background-image:
url('https://media.geeksforgeeks.org/wp-content/uploads/20230416201559/DevOps-Roadmap.webp');
        }

        .img2 {
            background-image:
url('https://media.geeksforgeeks.org/wp-content/uploads/20231207165628/Full-Stack-Developer-Roadmap.webp');
        }

        .img3 {
            background-image:
url('https://media.geeksforgeeks.org/wp-content/uploads/20240308154942/web-(1).jpg');
        }

        .img1_data {
            color: rgb(34, 228, 57);
            margin-left: 10rem;
            margin-top: 15rem;
        }
    </style>
</head>

<body>
    <span class="img1_data">
        GeeksforGeeks is a leading platform that
        provides computer science resources and
        coding challenges for programmers and
        technology enthusiasts, along with
        interview and exam preparations for
        upcoming aspirants.
    </span>
    <div class="bg-image img1">
    </div>
    <div class="bg-image img2">
    </div>
    <div class="bg-image img3">
    </div>
</body>

</html>

Output:

How to Change Background Images on Scroll using CSS?

skaftafh

Improve

Article Tags :

Similar Reads

How to Rotate Container Background Image using CSS ?

Rotating a container's background image using CSS involves applying the transform: rotate() property to the container element. This rotates the entire element at a specified angle, including its background image, creating a dynamic, rotating visual effect on the web page's design.Approach: Using tra

How to change the background image using jQuery ?

To change the background image using jQuery, you can use the jQuery CSS() method. For this, the whole property value is specified using the url() functional notation. Approach: Suppose we have an image URL stored in a variable and then use css() method to change the value of background image. Below

How to Create a Change Background on Scroll using HTML CSS and JavaScript ?

In this article, we will try to change the background color of the container once the scroll occurs. If a user scrolls down the page the background color will be changed. We will use the below approach to accomplish this task.Using the scroll event on the window objectIn this approach, we will use t

How to set multiple background images using CSS?

The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr

How to Change Background Image in javaScript?

This article will show you how to change the background color in JavaScript. Changing a background image in JavaScript involves modifying the style property of an HTML element to update its backgroundImage property. This can be done by selecting the element and setting its style.backgroundImage prop

How to blur background image using CSS ?

CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of a document written in HTML. In this article, we will learn how to blur background images using CSS, along with basic implementation examples. Blurring Background Images with CSSTo blur a background image usi

How to change the position of background image using jQuery ?

In this article, we will see how to change the position of the background image using jQuery. To change the position of the background image, we will use css() method with float property.Â The css() method is used to change the style property of the selected element. The float property is used to cha

How to control scrolling of image using CSS ?

In this article, we will see what property can be utilized to control the image scroll using CSS. To accomplish this task, we can implement the background-attachment property that specifies the kind of attachment of the background image with respect to its container. It can be applied to all HTML el

How to change Background Gradient on Scroll ?

Linear gradient provides the color transition along a straight line. A Radial gradient provides the color transition that radiates outward from a central point. Creating a gradient background color that changes on scroll using CSS involves combining CSS for gradients to handle the scrolling effect.

How to transform background image using CSS3 ?

In this article we will learn how to transform a background image using CSS3, The transform property in CSS is used to transform the background image. In Approach: The CSS transform property is used to apply the two-dimensional or three-dimensional transformation to an element. The transform propert