The background-attachment property is used to specify that the background image is fixed or scroll with the rest of the page in the browser window.
This attribute offers three options: scroll, fixed, and local. By default, it is set to scroll, preventing the element from scrolling along with its content. When set to local, the element will scroll in sync with the content. Opting for fixed will ensure that the background image remains stationary even when the page is scrolled in the browser.
This CSS attribute has the capability to accommodate numerous background visuals. Each background-image can be assigned a distinct value for the background-attachment attribute, delineated by commas. Each image will align with its respective property value.
Syntax
background-attachment: scroll | fixed | local | initial | inherit;
The values associated with this attribute are specified in the following manner.
Property Values
The background-attachment attribute in CSS decides whether a background image should remain fixed or scroll with the content. It is capable of accepting a range of values. It can be set to one of the options below:
- Fixed: This is the default setting where the background image stays in place as the user scrolls through the content.
No matter how much the user scrolls, the background image will remain fixed in its position, creating a fixed backdrop effect.
background-attachment: fixed;
- Local: The background image remains fixed in relation to the element's content, not the page itself. This is especially important when using background images on elements with a defined size, like those with a specific height and overflow set to scroll.
- Initial: Provides the property's original value back to it.
- Inherit: Passed down from the parent element starting from the initial occurrence.
background-attachment: local;
background-attachment: initial;
background-attachment: inherit;
Examples
Example 1:
This serves as a demonstration of how the code could be implemented within a CSS rule:
body {
background-image: url('background.jpg');
background-attachment: fixed;
background-size: cover; /* Optional: Specifies how the background image should be sized */
}
The provided background image is designated as 'background.jpg,' and with the background-attachment: fixed; property, it remains stationary as the user scrolls through the content. For complete coverage of the element by the background image, you have the choice to apply the optional background-size: cover; property.
Remember that different browsers, especially older ones, may act differently with regard to the background-attachment parameter. If cross-browser compatibility is an issue for your project, make sure always to be ready to check for it.
- Parallax Effect: To produce a parallax effect, the background-attachment: fixed; property is frequently used. When the user scrolls, background images move at a different pace than the foreground content, creating the illusion of depth.
- Performance Considerations: Although the parallax effect can provide a website with a visually appealing feature, it's important to take the performance into account, particularly when using mobile devices. On some devices, fixed backdrop graphics can affect scrolling performance and increase memory use.
- Shorthand Property: The shorthand background property allows you to specify several background-related variables in a single line. It also includes the background-attachment property to it.
As an illustrated code :
body {
background: url('background.jpg') fixed no-repeat center center / cover;
}
In this instance, the center/cover option specifies the positioning and dimensions of the background image, the fixed option corresponds to the background-attachment, and the no-repeat option signifies that the background image should not repeat.
- Multiple Backgrounds: When employing the background property for multiple background images, distinct background-attachment values can be assigned to each image.
For example:
The initial background image in this demonstration is positioned centrally at the upper part, extends to cover the entire element, and remains fixed. Positioned at the lower left corner of the element, the subsequent background image moves in conjunction with the content scrolling.
body {
background:
url('background1.jpg') fixed center top/cover,
url('background2.jpg') scroll left bottom / contain;
}
Recall that the specific goals and user interaction aspects unique to your project will influence the relevance of the background-attachment property. Consistency and visual appeal can be assured by experimenting and testing on different browsers and devices.
- Browser Support and Compatibility: While the majority of up-to-date browsers accommodate background-attachment, it is crucial to confirm compatibility, especially if your project requires functionality across older browsers. Keep in mind that some mobile browsers may not fully support fixed backgrounds.
- Scrolling Elements: The application of the background-attachment property is not limited to the body element; you can also utilize it on other elements. For instance, assigning a fixed background can enhance a specific section of your webpage with a distinctive visual component.
- When you want precise control over how your background images appear, you have the option to blend background-attachment with additional background properties like background-position and background-size.
.hero-section {
background-image: url('hero-background.jpg');
background-attachment: fixed;
background-size: cover;
}
.header {
background: url('header-background.jpg') fixed top center/auto 50%;
}
The background image featured in this demonstration is set as a fixed element, positioned at the top center. Its dimensions are configured to occupy 50% of the container's height while adjusting its width automatically.
Example 2
In this instance, we are leveraging the scroll value of the background-attachment attribute, which represents the default functionality. Thus, as the page is scrolled, the background moves in conjunction with it.
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#example {
background-image: url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1> background-attachment: scroll;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</div>
</body>
</html>
Output
Example 3: Using fixed value
In this instance, we are employing the specified setting of the background-attachment property. This setting fixes the background image in place, ensuring that it remains stationary regardless of the scrolling of the remaining content.
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#example {
background-image: url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1> background-attachment: fixed;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</div>
</body>
</html>
Output
Example 4: Using local value
In this instance, we are utilizing the intrinsic value of the background-attachment attribute. In this scenario, the background picture will move along with the scrolling of the content within the element.
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#example {
background-image: url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: local;
}
</style>
</head>
<body>
<h1> background-attachment: local;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</div>
</body>
</html>
Output
Now, let's explore a different scenario where multiple background images are applied to an element.
Example 5:
Here, we have two background images to which we are assigning the background-attachment property. The first image has a fixed attachment, while the second image has a scroll attachment.
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#example {
background-image: url("jtp.png"), url("forest.jpg");
height: 500px;
border: 4px solid red;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed, scroll;
}
</style>
</head>
<body>
<h1> background-attachment: scroll;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
</div>
</body>
</html>
Output
Conclusion
In summary, you have the ability to control how a background image behaves as a user navigates a webpage by utilizing the background-attachment property in CSS. The available choices consist of scroll, which results in the image moving along with the content, fixed, which establishes a stationary background effect, local, which permits scrolling within an element, initial, which defines the default behavior, and inherit, which enables it to inherit characteristics from its parent. Depending on the visual outcome you aim for on your website or web application, opt for the suitable value.