CSS Background Attachment

CSS background-attachment is a property that determines whether a background image scrolls with the content or remains fixed in its position as the user scrolls the web page.

scroll

Example
Try yourself 
        
            body {
    background-image: url('/images/common/background.jpeg');
    background-attachment: scroll;
}

The background image scrolls with the content as the user scrolls the web page. This is the default behavior.

fixed

Example
Try yourself 
        
            body {
    background-image: url('/images/common/background.jpeg');
    background-attachment: fixed;
}

The background image remains fixed in its position, even as the user scrolls the web page. It creates a "fixed" background effect.

The background-attachment property is commonly used for creating parallax scrolling effects or for keeping the background image stationary while the content scrolls over it.

By adjusting the value of background-attachment, you can control how the background image behaves as the user scrolls the web page. Experiment with different values to achieve the desired visual effect.