How to control scrolling of image using CSS ?

Last Updated : 02 Aug, 2024

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 elements. We can specify a different value of the background-attachment property for each background image, separated by commas. The default value of image scrolling is scroll.

Syntax:

selector {
    background-image: url('GFG.jpg');     
    background-attachment: fixed;        
}

Attribute Values:

scroll: It prevents the element from scrolling with the contents, but scrolls with the page.
fixed: The background image doesn’t move with the content of the element, even the element is set as scrolling.
local: It set the background image to scroll with the content of the element.
initial: It sets the CSS property to its default value.
inherit: It sets elements to inherit from its parent element.

Example 1: This example implements the CSS background-attachment property, where the text scrolling and keeping image fixed.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Attachment Property</title>
    <style>
        body {
            /* Background image */
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20240725112326/bg_img.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed; /* Keeps the image fixed while scrolling */
            background-position: center;
            background-size: cover;
            margin: 0;
            padding: 0;
            color: aliceblue;
            font-family: Arial, sans-serif;
        }

        h1, h3 {
            color: green;
            text-align: center;
            margin-top: 20px;
        }

        p {
            color: black;
            text-align: justify;
            line-height: 1.6;
            padding: 0 20px;
            max-width: 800px;
            margin: 20px auto;
        }

        /* Optional styling for responsiveness */
        @media (max-width: 768px) {
            p {
                padding: 0 10px;
                font-size: 0.9rem;
            }

            h1 {
                font-size: 2rem;
            }

            h3 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Background-attachment Property</h3>

    <p>
        A Computer Science portal for geeks. It contains well
        written, well thought and well explained computer 
        science and programming articles Learn Data Structures
        and Algorithms Online at Your Own Pace with GeeksforGeeks
        DSA Course. Master DSA basics and practice Data Structure
        interview questions with GFG DSA self paced. The 
        DSA online course is designed to improve your 
        problem-solving and coding skills by enhancing 
        your understanding of Data Structures & Algorithms. 
        Web Technology refers to the various tools and techniques
        that are utilized in the process of communication 
        between different types of devices over the internet. A web
        browser is used to access web pages. Web browsers can be
        defined as programs that display text, data, pictures, 
        animation, and video on the Internet. Hyperlinked 
        resources on the World Wide Web can be accessed
        using software interfaces provided by Web browsers.
    </p>

    <p>
        A Computer Science portal for geeks. It contains well
        written, well thought and well explained computer 
        science and programming articles Learn Data Structures
        and Algorithms Online at Your Own Pace with GeeksforGeeks
        DSA Course. Master DSA basics and practice Data Structure
        interview questions with GFG DSA self paced. The 
        DSA online course is designed to improve your 
        problem-solving and coding skills by enhancing 
        your understanding of Data Structures & Algorithms. 
        Web Technology refers to the various tools and techniques
        that are utilized in the process of communication 
        between different types of devices over the internet. A web
        browser is used to access web pages. Web browsers can be
        defined as programs that display text, data, pictures, 
        animation, and video on the Internet. Hyperlinked 
        resources on the World Wide Web can be accessed
        using software interfaces provided by Web browsers.
    </p>

    <p>
        A Computer Science portal for geeks. It contains well
        written, well thought and well explained computer 
        science and programming articles Learn Data Structures
        and Algorithms Online at Your Own Pace with GeeksforGeeks
        DSA Course. Master DSA basics and practice Data Structure
        interview questions with GFG DSA self paced. The 
        DSA online course is designed to improve your 
        problem-solving and coding skills by enhancing 
        your understanding of Data Structures & Algorithms. 
        Web Technology refers to the various tools and techniques
        that are utilized in the process of communication 
        between different types of devices over the internet. A web
        browser is used to access web pages. Web browsers can be
        defined as programs that display text, data, pictures, 
        animation, and video on the Internet. Hyperlinked 
        resources on the World Wide Web can be accessed
        using software interfaces provided by Web browsers.
    </p>
    <p>
        A Computer Science portal for geeks. It contains well
        written, well thought and well explained computer 
        science and programming articles Learn Data Structures
        and Algorithms Online at Your Own Pace with GeeksforGeeks
        DSA Course. Master DSA basics and practice Data Structure
        interview questions with GFG DSA self paced. The 
        DSA online course is designed to improve your 
        problem-solving and coding skills by enhancing 
        your understanding of Data Structures & Algorithms. 
        Web Technology refers to the various tools and techniques
        that are utilized in the process of communication 
        between different types of devices over the internet. A web
        browser is used to access web pages. Web browsers can be
        defined as programs that display text, data, pictures, 
        animation, and video on the Internet. Hyperlinked 
        resources on the World Wide Web can be accessed
        using software interfaces provided by Web browsers.
    </p>
    <p>
        A Computer Science portal for geeks. It contains well
        written, well thought and well explained computer 
        science and programming articles Learn Data Structures
        and Algorithms Online at Your Own Pace with GeeksforGeeks
        DSA Course. Master DSA basics and practice Data Structure
        interview questions with GFG DSA self paced. The 
        DSA online course is designed to improve your 
        problem-solving and coding skills by enhancing 
        your understanding of Data Structures & Algorithms. 
        Web Technology refers to the various tools and techniques
        that are utilized in the process of communication 
        between different types of devices over the internet. A web
        browser is used to access web pages. Web browsers can be
        defined as programs that display text, data, pictures, 
        animation, and video on the Internet. Hyperlinked 
        resources on the World Wide Web can be accessed
        using software interfaces provided by Web browsers.
    </p>
</body>
  
</html>

Output:

Example 2: This example describes the background-attachment property in CSS by specifying the text scrolling and making the image scroll with it.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Background Attachment Property</title>
    <style>
        body {
            /* Fixing Background image */
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20240725112326/bg_img.jpg');
            background-repeat: no-repeat;
            background-attachment: scroll; /* Keeps the image scrolling with content */
            background-position: center;
            background-size: cover;
            margin: 0;
            padding: 0;
            color: aliceblue;
            font-family: Arial, sans-serif;
        }

        h1, h3 {
            color: green;
            text-align: center;
            margin-top: 20px;
        }

        p {
            color: aliceblue;
            text-align: justify;
            line-height: 1.6;
            padding: 0 20px;
            max-width: 800px;
            margin: 20px auto;
        }

        /* Optional styling for responsiveness */
        @media (max-width: 768px) {
            p {
                padding: 0 10px;
                font-size: 0.9rem;
            }

            h1 {
                font-size: 2rem;
            }

            h3 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Background-attachment Property</h3>
    <p>
        A Computer Science portal for geeks. It contains well
        written, well thought and well explained computer 
        science and programming articles. Learn Data Structures
        and Algorithms Online at Your Own Pace with GeeksforGeeks
        DSA Course. Master DSA basics and practice Data Structure
        interview questions with GFG DSA self-paced. The 
        DSA online course is designed to improve your 
        problem-solving and coding skills by enhancing 
        your understanding of Data Structures & Algorithms. 
        Web Technology refers to the various tools and techniques
        that are utilized in the process of communication 
        between different types of devices over the internet. A web
        browser is used to access web pages. Web browsers can be
        defined as programs that display text, data, pictures, 
        animation, and video on the Internet. Hyperlinked 
        resources on the World Wide Web can be accessed
        using software interfaces provided by Web browsers.
    </p>

    <p>
        A Computer Science portal for geeks. It contains well
        written, well thought and well explained computer 
        science and programming articles. Learn Data Structures
        and Algorithms Online at Your Own Pace with GeeksforGeeks
        DSA Course. Master DSA basics and practice Data Structure
        interview questions with GFG DSA self-paced. The 
        DSA online course is designed to improve your 
        problem-solving and coding skills by enhancing 
        your understanding of Data Structures & Algorithms. 
        Web Technology refers to the various tools and techniques
        that are utilized in the process of communication 
        between different types of devices over the internet. A web
        browser is used to access web pages. Web browsers can be
        defined as programs that display text, data, pictures, 
        animation, and video on the Internet. Hyperlinked 
        resources on the World Wide Web can be accessed
        using software interfaces provided by Web browsers.
    </p>

    <p>
        A Computer Science portal for geeks. It contains well
        written, well thought and well explained computer 
        science and programming articles. Learn Data Structures
        and Algorithms Online at Your Own Pace with GeeksforGeeks
        DSA Course. Master DSA basics and practice Data Structure
        interview questions with GFG DSA self-paced. The 
        DSA online course is designed to improve your 
        problem-solving and coding skills by enhancing 
        your understanding of Data Structures & Algorithms. 
        Web Technology refers to the various tools and techniques
        that are utilized in the process of communication 
        between different types of devices over the internet. A web
        browser is used to access web pages. Web browsers can be
        defined as programs that display text, data, pictures, 
        animation, and video on the Internet. Hyperlinked 
        resources on the World Wide Web can be accessed
        using software interfaces provided by Web browsers.
    </p>
    <p>
        A Computer Science portal for geeks. It contains well
        written, well thought and well explained computer 
        science and programming articles. Learn Data Structures
        and Algorithms Online at Your Own Pace with GeeksforGeeks
        DSA Course. Master DSA basics and practice Data Structure
        interview questions with GFG DSA self-paced. The 
        DSA online course is designed to improve your 
        problem-solving and coding skills by enhancing 
        your understanding of Data Structures & Algorithms. 
        Web Technology refers to the various tools and techniques
        that are utilized in the process of communication 
        between different types of devices over the internet. A web
        browser is used to access web pages. Web browsers can be
        defined as programs that display text, data, pictures, 
        animation, and video on the Internet. Hyperlinked 
        resources on the World Wide Web can be accessed
        using software interfaces provided by Web browsers.
    </p>
    <p>
        A Computer Science portal for geeks. It contains well
        written, well thought and well explained computer 
        science and programming articles. Learn Data Structures
        and Algorithms Online at Your Own Pace with GeeksforGeeks
        DSA Course. Master DSA basics and practice Data Structure
        interview questions with GFG DSA self-paced. The 
        DSA online course is designed to improve your 
        problem-solving and coding skills by enhancing 
        your understanding of Data Structures & Algorithms. 
        Web Technology refers to the various tools and techniques
        that are utilized in the process of communication 
        between different types of devices over the internet. A web
        browser is used to access web pages. Web browsers can be
        defined as programs that display text, data, pictures, 
        animation, and video on the Internet. Hyperlinked 
        resources on the World Wide Web can be accessed
        using software interfaces provided by Web browsers.
    </p>
    <p>
        A Computer Science portal for geeks. It contains well
        written, well thought and well explained computer 
        science and programming articles. Learn Data Structures
        and Algorithms Online at Your Own Pace with GeeksforGeeks
        DSA Course. Master DSA basics and practice Data Structure
        interview questions with GFG DSA self-paced. The 
        DSA online course is designed to improve your 
        problem-solving and coding skills by enhancing 
        your understanding of Data Structures & Algorithms. 
        Web Technology refers to the various tools and techniques
        that are utilized in the process of communication 
        between different types of devices over the internet. A web
        browser is used to access web pages. Web browsers can be
        defined as programs that display text, data, pictures, 
        animation, and video on the Internet. Hyperlinked 
        resources on the World Wide Web can be accessed
        using software interfaces provided by Web browsers.
    </p>
</body>
  
</html>