How to Specify a Fixed Background Image in CSS?

How to Specify a Fixed Background Image in CSS?

Last Updated : 18 Sep, 2024

We will explore how to specify a fixed background image using the background-attachment property in CSS. This property is used to control the behavior of a background image as the user scrolls through a web page. By using the background-attachment property, you can make a background image fixed, scroll, or local to the element.

What is the background-attachment Property?

The background-attachment property in CSS defines how a background image moves when the page or an element is scrolled. This property is useful when you want to create a visually appealing design by keeping the background image static or scrolling it along with the content.

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: Fixing a Background Image

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:
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

How to Specify a Fixed Background Image in CSS?

M

manastole01

Improve

Article Tags :

Similar Reads

How to Set Background Image in CSS?

CSS (Cascading Style Sheets) can allow developers to set the background image for the web pages or specific HTML elements. This feature can help enhance the visual aesthetics of the website. The background-image property in CSS can be used to specific one or multiple background images to be applied

How to Add Background Image in CSS?

The CSS background-image property is used to add an image as a background to an element.Syntaxbackground-image: url()1. Setting background Image of an ElementA background image is added to an h1 tag using the URL.HTML<h1 style="background-image: url( 'https://media.geeksforgeeks.org/wp-content/up

How to Remove Background from image in CSS?

In modern web design, over 85% of websites use background manipulation to enhance visual appeal and layering. CSS offers several ways to remove or hide image backgrounds, such as using transparency, clipping, or masking techniques. This article will cover the most effective and up-to-date methods to

How to Change Background Image in javaScript?

This article will show you how to change the background color in JavaScript. Changing a background image in JavaScript involves modifying the style property of an HTML element to update its backgroundImage property. This can be done by selecting the element and setting its style.backgroundImage prop

How to Add filter to the background image using CSS?

Adding filters to background images using CSS allows you to apply visual effects like blur, grayscale, brightness adjustment, and more without modifying the actual image file. CSS provides a set of filter functions that can be applied to elements with background images. This approach enhances design