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 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:
Please Login to comment...