The background attachment property controls how a background image behaves when the page is scrolled. With this property, you can decide if the background image stays fixed or scrolls along with the rest of the page content. This helps create various visual effects in your design.

There are a few values for background attachment. The most common are fixed (the background does not move when scrolling) and scroll (the background moves with the content).

Syntax

Follow below syntax to add background attachment in CSS code.

element {
  background-attachment: value;
}

Explanation:

• background-attachment: This property determines how the background image behaves during scrolling.
• value: Replace this with either fixed or scroll (or other valid values) to get the desired effect.

Example 1: Fixed Background Attachment

In this example, we will use a fixed background attachment so that the background image remains stationary while the rest of the page scrolls.

Explanation:

• Background Image: The image is set to cover the full viewport without repeating.
• Fixed Attachment: The property background-attachment: fixed; ensures that the background image does not move while scrolling.
• Outcome: As you scroll, the content moves over the background, creating a striking visual effect.

Example 2: Scroll Background Attachment

In this example, we will use the default scroll behavior so that the background image moves along with the page content when scrolling.

Explanation:

• Background Image: The image is applied in the same manner, covering the full background.
• Scroll Attachment: The property background-attachment: scroll; ensures the background image scrolls with the rest of the content.
• Outcome: This creates a more traditional scrolling effect where both content and background move together.

This lesson demonstrates how to control background attachment in your CSS. By understanding the difference between fixed and scroll, you can create interesting scrolling effects to enhance the visual design of your web pages.