How to Specify a Fixed Background Image in CSS? Last Updated : 05 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report Adding a background image to a website is one of the most common design techniques. But what if you want the image to stay fixed in place, even when the user scrolls down the page?That’s exactly what fixed background images in CSS are for. This article will guide you step-by-step on how to specify and control a fixed background image using CSS.CSS background-attachment PropertyThe background-attachment property defines the scrolling behavior of background images on a web page or within an element. It determines if the background image moves as the user scrolls or stays fixed.Values of background-attachment:Fixed: The background image will not scroll. It is fixed with the page.Local: The background image will scroll with the content.Scroll(default): The background image scrolls with the content.Syntax:selector { background-attachment: scroll | fixed | local;}Example: Fixing a Background ImageIn this example, we are using the background-attachment property. 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: In this example:The property background-attachment: fixed; keeps the background image fixed relative to the viewport.As you scroll the page, the content scrolls over the fixed background image.This effect adds depth and an attractive design element to your page.Browser Support for background-attachmentBrowserSupported VersionsGoogle Chrome1.0+Firefox1.0+Internet Explorer4.0+Opera3.5+Safari1.0+Tips for Using background-attachmentUse high-resolution images for better appearance on large screens.Combine background-size: cover; for full coverage.Avoid using fixed background on mobile devices due to performance issues; use media queries to disable on smaller screens.Use with other background properties for more complex effects (like gradients, multiple backgrounds). Comment More infoAdvertise with us Next Article How to Add Background Image in CSS? M manastole01 Follow Improve Article Tags : Web Technologies CSS CSS-Properties CSS-Questions 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 3 min read 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 1 min read 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 5 min read 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 2 min read 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 3 min read 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 3 min read Like