How to specify a fixed background-image in CSS ?

02 Jul, 2021
In this article, we are going to see how to specify a fixed background image in CSS. To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property.
Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
Values of background-attachment property:
Scroll: It is the default value for the background-attachment property. It is used to scroll the image with the background page.
Fixed: The background image will not scroll. It is fixed with the page.
Local: The background image will scroll with the content.
To keep your background image fixed, you have to use background-attachment property with the value Fixed.
Syntax:
background-attachment: fixed;
Example:
HTML
<!DOCTYPE html><html> <head>    <style type="text/css">        h1 {            text-align: center;        }         #ex {            text-align: center;            background-image:url("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");            background-position: center;            background-repeat: no-repeat;            background-attachment: fixed;        }    </style></head> <body>     <h1>Example for fixed Background Image</h1>     <div id="ex">         <p>            Paragraphs are the building blocks            of papers. Many students define            paragraphs in terms of length: a            paragraph is a group of at least            five sentences,        </p>         <br><br>          <p>            a paragraph is half a page long,            etc. In reality, though, the unity            and coherence of ideas among            sentences is what constitutes a            paragraph.        </p>         <br><br>          <p>            A paragraph is defined as “a group            of sentences or a single sentence            that forms a unit” (Lunsford and            Connors 116).        </p>          <br><br>         <p>            Length and appearance do not            determine whether a section in            a paper is a paragraph.        </p>         <br><br>          <p>            For instance, in some styles of            writing, particularly journalistic            styles, a paragraph can be just            one sentence long. Ultimately, a            paragraph is a sentence or group of            sentences that support one main idea.        </p>         <br><br>          <p>            In this handout, we will refer to this            as the “controlling idea,” because it            controls what happens in the rest            of the paragraph.        </p>     </div></body> </html>
Output: 
Supported Browsers:
Google Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Opera 3.5
Safari 1.0
ysachin2314
CSS-Properties
CSS-Questions
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array