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.
Syntax
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.
Examples
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
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