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

How to Add a Background Image in Next.js?

Next.js is a powerful React framework that allows for server-side rendering and the generation of static websites. Adding a background image to your Next.js application can enhance the visual appeal of your web pages. This article will guide you through the process of adding a background image to a

How to set a Responsive Full Background Image Using CSS ?

The purpose of this article is to set a Responsive Full Background Image Using CSS.To set a Responsive Full Background Image using CSS we will use the CSS background-size property that has a value auto that tells the browsers to automatically scale the image's width and height based on the container

How to stretch and scale background image using CSS?

The background-size property is used to stretch and scale the background image. This property set the size of the background image. Here we will see all possible examples of background-size and background-scale properties. Syntax: background-size: auto|length|cover|contain|initial|inherit;cover: Thi

How to Create a Half Page Background Image with CSS?

A half-page background image is an image that covers half of the viewport height. This can be useful for creating visually distinct sections on a webpage, especially for headers or introductory sections. These are the different approaches to creating a half-page background image using CSS: Table of