Background Attachment in CSS
FREE
Overview
The CSS background-attachment property determines whether the background image stays fixed within the viewport or scrolls with the page. This property accepts keyword values such as scroll, fixed, local, inherit, and initial. Background attachments in CSS can support multiple background images.
Build an AI-First Career, Master the Complete Skillset
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
AI Forward Deployed Engineer Program
Full-stack engineering, production AI and client-facing consulting
+1000 moreSyntax
This property takes values like a scroll, fixed, local, etc. Its default value is scroll, which causes the background image to scroll with the page.
In the following section of the article, we will discuss the various keyword values that the CSS background property supports.
Background Attachment in CSS: Property Values
| Value | Description | Syntax |
|---|---|---|
| scroll | It is the default value. It sets the background image to stay in its position relative to the containing element and causes it to scroll with the page. | background-attachment |
| fixed | It fixes the background image at its position relative to the viewport. The background image remains fixed regardless of the container's scrolling mechanism. | background-image |
| local | It specifies the background image to scroll along with the content of its container element instead of the entire page. | background-attachment |
| Initial | It sets the background-attachment property to its default value. | background-attachment |
| Inherit | It inherits the property from its parent element. | background-attachment |
Multiple Background Images
The property supports multiple background images. Each background image can have a different background-attachment property value, separated by commas.
SYNTAX
EXAMPLE
We can understand the background-attachment in CSS through the following examples.
How Scaler Transformed Careers in Different Fields
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ moreExamples
Simple Examples
Example 1 : This example describes the scroll value. The background image scrolls with its container, displaying the default behavior of the background-attachment property.
HTML
Output
To view this in a better way click here
Example 2 : This example describes the fixed value. The background image stays fixed when we scroll the page.
HTML
CSS
Output
To view this in a better way click here
Example 3 : This example describes the local value. The background-image scrolls with the element's content.
HTML
CSS
Output
To view this in a better way click here
Turn Learning into Career Growth
Multiple Background Images
Example 1: This example describes the multiple background image support.
In this example, we are using background attachments in CSS on two background images. The first image has a scroll value, whereas the second one has a fixed value. Therefore, the first image scrolls with the page, and the second one remains fixed.
HTML
CSS
Output
To view this in a better way click here
Browser Support
The following browsers support the CSS border-style property:
| Browser | Version |
|---|---|
| Google Chrome | 2.0 |
| Safari | 1.0 |
| Mozilla Firefox | 1.0 |
| Microsoft Edge | 12.0 |
| Chrome Android | 18 |
| Firefox for Android | 4 |
| Opera Android | 10.1 |
| Safari on iOS | 3.2 |
| Samsung Internet | 1.0 |
| WebView Android | 37 |
Conclusion
- The background-attachment property specifies whether the background image is fixed or scrolls with the rest of the page.
- It controls the scrolling of an image in the background.
- The property takes keyword values such as scroll, fixed, local, initial, and inherit
- scroll value displays the default behavior.
- Background attachment in CSS supports multiple image backgrounds.
Related Properties
- background-image
- background-position
- background-repeat
- background-size
