CSS Background Attachment

The background-attachment property in CSS is used to control whether the background image scrolls with the rest of the page or remains fixed.

Background Attachment Options

Here are the different values for the background-attachment property:

• scroll – The background image scrolls with the rest of the page. This is the default behavior.
• fixed – The background image is fixed in the viewport, so it doesn’t move when the content is scrolled.
• local – The background image scrolls with the element’s content (if the element has a scrolling mechanism).

Examples

Scroll

The background image scrolls with the rest of the page (default behavior).

div {
    background-attachment: scroll;
}

Fixed

The background image is fixed in the viewport.

div {
    background-attachment: fixed;
}

Local

The background image scrolls with the element’s content.

div {
    background-attachment: local;
}

Conclusion

The background-attachment property in CSS allows you to control the scrolling behavior of background images. By using different values, you can create various visual effects that enhance your web design.