How to specify a fixed background-image in CSS ?

Difficulty Level : Medium
Last Updated : 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

My Personal Notes

Related Articles

How to specify a fixed background-image in CSS ?

HTML

Start Your Coding Journey Now!