CSS background-attachment property
The background-attachment property in CSS is used to control how a background image behaves when the user scrolls the page. This property determines whether the background image stays fixed relative to the viewport or moves with the content of the element as it is scrolled.
Basic Usage
The basic syntax for the background-attachment property is:
selector {
background-attachment: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100%;
height: 400px;
background-image: url('background.jpg');
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
In this example, the background image background.jpg will remain fixed as the page is scrolled.
Values for background-attachment
1. scroll
- Description: The background image scrolls with the element's content. This is the default value.
- Use Case: Suitable for most typical uses where the background should move along with the rest of the page content.
div {
background-attachment: scroll;
}
2. fixed
- Description: The background image stays fixed relative to the viewport, meaning it does not move when the page is scrolled.
- Use Case: Ideal for creating a "parallax" effect or when you want the background to remain static while the rest of the content moves.
div {
background-attachment: fixed;
}
3. local
- Description: The background image scrolls with the element's content. If the element has a scrolling mechanism (like a scrollable
div), the background will move as you scroll through the content within the element. - Use Case: Useful when dealing with elements that have their own scrolling containers, ensuring the background stays aligned with the content as it scrolls.
div {
background-attachment: local;
}
Practical Examples
Creating a Fixed Background for a Full-Page Effect
body {
background-image: url('full-page-bg.jpg');
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
In this example, the background image covers the entire page and remains fixed as the user scrolls, creating a static background effect.
Scrollable Content with a Fixed Background
.container {
width: 100%;
height: 300px;
overflow-y: scroll;
background-image: url('scroll-bg.jpg');
background-attachment: fixed;
}
Here, the background image is fixed, and only the content within the .container div scrolls. This setup can create an interesting visual effect where the content appears to scroll over a fixed background.
Using local with a Scrollable Element
.scrollable-div {
width: 200px;
height: 200px;
overflow: auto;
background-image: url('local-bg.jpg');
background-attachment: local;
background-size: cover;
}
In this example, as you scroll the content within the .scrollable-div, the background image will move with the content, aligning with the scroll position of the element.
Interaction with Other Background Properties
background-position: Determines where the background image is positioned within the element, which can be combined withbackground-attachmentfor precise control.background-size: Adjusts the size of the background image, which influences how the fixed or scrollable background appears.background-repeat: Controls whether the image is repeated, which can create patterns or continuous effects when combined with differentbackground-attachmentvalues.
Example: Combining background-attachment with background-size
section {
background-image: url('example.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
}
In this example, the background image is fixed in place, covers the entire section, and is centered within the section.