CSS Background Attachment
The background-attachment property controls whether the background
image is fixed or scrolls along with the rest of the page in the browser
window.
This property has three possible values: scroll, fixed, and local. By
default, the value is set to scroll, meaning the background image does
not move with the content. When set to local, the background image
scrolls along with the content. If set to fixed, the background image
remains stationary during scrolling.
This property also supports multiple background images. You can assign
different values to the background-attachment property for each
background image by separating them with commas. Each image will
correspond to its specific value.
Syntax
background-attachment:
scroll |
fixed |
local |
initial |
inherit;
The values of this property are described as follows:
Property values
The background-attachment property in CSS controls whether a background
image moves with the content or remains fixed. It can accept any of the
following values:
Scroll
This is the default setting. As the user scrolls down the page, the
background image moves along with the content.
background-attachment:
scroll;
Fixed
The background image remains stationary regardless of how far the user
scrolls. This creates a "fixed" background effect.
background-attachment:
fixed;
Local
The background image scrolls with the content of the element, not the
entire page. This is especially useful when applying background images to
elements with a fixed size, such as those with a defined height and
overflow set to scroll.
background-attachment:
local;
Initial
Resets the property to its default value.
background-attachment: initial;
Inherit
Takes the value from its parent element.
background-attachment:
initial;
Examples
Example 1
Here’s an example of how it can be applied in a CSS rule:
body {
background-image:
url('background.jpg');
background-attachment:
fixed;
background-size:
cover; /* Optional: Defines how the
background image should be sized */
}
In this example, the background image is set to 'background.jpg,' and
because of the background-attachment: fixed; property, it will remain
fixed while the user scrolls down the page. To ensure the background image
covers the entire element, you can use the optional background-size:
cover; property.
Keep in mind that different browsers, especially older ones, may handle
the background-attachment property differently. If cross-browser
compatibility is important for your project, make sure to test it across
various browsers.
Parallax Effect: The
background-attachment: fixed; property is often used to create a parallax
effect. As the user scrolls, the background images move at a different
speed than the foreground content, giving the illusion of depth.
Performance Considerations: While
the parallax effect can enhance a website's visual appeal, it's essential
to consider performance, especially on mobile devices. On some devices,
fixed background images can impact scrolling performance and increase
memory usage.
Shorthand Property: The shorthand
background property allows you to define multiple background-related
properties in one line, including the background-attachment
property.
Here’s an example of the code:
body {
background:
url('background.jpg') fixed no-repeat center center / cover;
}
In this example, center / cover specifies the positioning and size of the
background image, fixed relates to the background-attachment, and
no-repeat means the background image will not be repeated.
Multiple Backgrounds: When using the
background property for multiple background images, you can assign
different background-attachment values to each image.
For Example
In this example, the first background image is centered at the top,
covers the entire element, and is fixed in place. The second background
image is positioned at the bottom left of the element and scrolls with the
content.
body {
background:
url('background1.jpg') fixed center top / cover, url('background2.jpg')
scroll left bottom / contain;
}
Remember that the effectiveness of the background-attachment property
will depend on the design goals and user experience considerations
specific to your project. To achieve a consistent and visually appealing
result, it's important to experiment and test across different browsers
and devices.
Browser Support and Compatibility:
While most modern browsers support background-attachment, it’s essential
to check compatibility, especially if your project needs to work with
older browsers. Keep in mind that some mobile browsers may not handle
fixed backgrounds the same way.
Scrolling Elements: You can apply
the background-attachment property to elements other than the body. For
instance, you can set a fixed background for a specific section of your
webpage to create a distinctive visual effect.
.hero-section {
background-image:url('herobackground.jpg');
background-attachment:
fixed;
background-size:
cover;
}
Combining with Other Background Properties: You can achieve more precise
control over your background images by using background-attachment
alongside other background-related properties, such as background-position
and background-size.
.header {
background:
url('header-background.jpg') fixed top center / auto 50%;
}
In this example, the background image is fixed, positioned at the top
center, and its size is set to 50% of the container's height with an
automatic width.
Example 2
In this example, we are using the scroll value for the
background-attachment property, which is the default behavior. This means
that when the page is scrolled, the background image moves along with
it.
<!DOCTYPE
html>
<html>
<head>
<title>background-attachment
Property</title>
<style>
#example {
background-image:
url("img2.jpg");
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, try resizing the browser window to see the effect.</p>
<div id="example">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta molestiae adipisci maxime voluptatum obcaecati quis recusandae omnis voluptate tenetur? Cupiditate ipsum dolores vero mollitia, voluptatibus reprehenderit illum alias exercitationem, necessitatibus earum velit similique harum? Iusto magnam quisquam ut doloribus officia!
</p>
</p>
</div>
</body>
</html>
Output
.png)
Example 3 using fixed value
In this example, we are using the fixed value for the
background-attachment property. This means the background image stays in
place and does not move when the rest of the document is scrolled.
<!DOCTYPE
html>
<html>
<head>
<title>background-attachment
Property</title>
<style>
#example {
background-image:
url("img2.jpg");
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, try resizing the browser window to see the effect.</p>
<div id="example">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta molestiae adipisci maxime voluptatum obcaecati quis recusandae omnis voluptate tenetur? Cupiditate ipsum dolores vero mollitia, voluptatibus reprehenderit illum alias exercitationem, necessitatibus earum velit similique harum? Iusto magnam quisquam ut doloribus officia!
</p>.</p>
</p>.</p>
</div>
</body>
</html>
Output
.png)
Example 4 using local value
In this example, we are using the local value for the
background-attachment property. This means the background image will
scroll along with the content of the element.
<!DOCTYPE
html>
<html>
<head>
<title>background-attachment
Property</title>
<style>
#example {
background-image:
url("img2.jpg");
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, try resizing the browser window to see the effect.</p>
<div id="example">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta molestiae adipisci maxime voluptatum obcaecati quis recusandae omnis voluptate tenetur? Cupiditate ipsum dolores vero mollitia, voluptatibus reprehenderit illum alias exercitationem, necessitatibus earum velit similique harum? Iusto magnam quisquam ut doloribus officia!
</p>
</p>
</div>
</body>
</html>
Output
.png)
Now, let’s look at another example where we use multiple background
images for an element.
Example 5
<!DOCTYPE
html>
<html>
<head>
<title>background-attachment
Property</title>
<style>
#example {
background-image:
url("img2.jpg"), url("img1.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, try resizing the browser window to see the effect.</p>
<div id="example"></div>
</body>
</html>
Output
.png)
Conclusion
In conclusion, you can control how a background image behaves when users
scroll through a webpage using the background-attachment property in CSS.
The options include scroll, which makes the image move with the content;
fixed, which creates a stationary background effect; local, which allows the
background to scroll within an element; initial, which sets it to the
default behavior; and inherit, which lets it inherit the value from its
parent. Choose the appropriate value based on the visual effect you want for
your website or web application.
.png&description=CSS BACKGROUND ATTACHMENT){kind=link}