Open In App

How to control scrolling of image using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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>
  
<head>
    <style>
        body {
            /* Fixing Background image  */
            background-image: url(
            background-repeat: no-repeat;
            background-attachment: fixed;
            /* Arranging the image */
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            text-align: justify;
        }
        h1,
        h3 {
            color: green;
            text-align: center;
        }
        p {
            color: aliceblue;
        }
    </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>
  
</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>
  
<head>
    <style>
        body {
            
            /* Fixing Background image  */
            background-image: url(
            background-repeat: no-repeat;
            background-attachment: scroll;
              
              /* Arranging the image */
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            text-align: justify;
        }
        h1,
        h3 {
            color: green;
            text-align: center;
        }
        p {
            color: aliceblue;
        }
    </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>
  
</body>
</html>


Output:

 



Last Updated : 22 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads