How to Specify a Fixed Background Image in CSS?

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 Property

The 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 Image

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

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

Tips for Using background-attachment

• Use 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).