Open In App

How to specify a fixed background-image in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 the background-attachment property with the value Fixed.

Syntax:

background-attachment: fixed;

Example: In this example, we are using the background-attachment property.

HTML




<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        h1 {
            text-align: center;
        }
 
        #ex {
            text-align: center;
            background-image:
            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


Last Updated : 04 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads