Controlling Background Image Scrolling with CSS `background-attachment`

Learn how to use CSS's `background-attachment` property to control whether background images scroll with the page content or remain fixed. This tutorial explains the different `background-attachment` values (scroll, fixed, local), their effects, and how to use them to create dynamic and engaging website designs.

Controlling Background Image Scrolling with CSS `background-attachment`

Understanding `background-attachment`

The CSS `background-attachment` property determines whether a background image scrolls with the page content or remains fixed in place as the user scrolls. This is a powerful tool for creating visual effects and enhancing website design.

`background-attachment` Property Values

The `background-attachment` property accepts the following values:

  1. scroll (default): The background image scrolls along with the page content. This is the standard behavior.
  2. fixed: The background image remains fixed in its position, even when the page is scrolled. This creates a parallax effect when combined with other elements that do scroll.
  3. local: The background image scrolls with the content of the element itself, not the entire page. This is useful when you have scrollable content within a container and want the background to scroll with that content.
  4. initial: Resets the property to its default value (scroll).
  5. inherit: Inherits the value from its parent element.

`background-attachment` Syntax

The syntax is:

background-attachment: scroll | fixed | local | initial | inherit;

Examples of `background-attachment`

The following examples demonstrate the effects of the different values. Remember that older browsers might handle `background-attachment: fixed` differently.

Example 1: `fixed`

CSS Code

body {
  background-image: url('background.jpg');
  background-attachment: fixed;
  background-size: cover;
}

In this example, the background image remains stationary even when the user scrolls.

Example 2: `scroll` (Default)

This demonstrates the default behavior where the background scrolls along with the page content.

Example 3: `local`

The background image scrolls only within the bounds of its containing element.

Using Multiple Background Images

You can specify multiple background images, each with its own `background-attachment` value:

CSS Code

body {
  background: url('background1.jpg') fixed center top / cover,
           url('background2.jpg') scroll left bottom / contain;
}

Parallax Effect and Performance

The `fixed` value is often used to create parallax scrolling effects, where background images move at a slower rate than foreground content. However, be mindful of performance impacts, especially on mobile devices, as fixed backgrounds can sometimes affect scrolling smoothness.

Shorthand `background` Property

You can combine `background-attachment` with other background properties (like `background-image`, `background-position`, `background-size`, `background-repeat`) using the shorthand `background` property:

CSS Code

body {
  background: url('background.jpg') fixed no-repeat center center / cover;
}

Browser Compatibility

While widely supported, always check browser compatibility, especially for older browsers or mobile devices, as support for `background-attachment: fixed` can sometimes vary.

Example: Multiple Background Images with Different Attachment

This example demonstrates using multiple background images with different `background-attachment` values. The first image is fixed, while the second scrolls with the page content:

CSS Code

body {
  background: url('background1.jpg') fixed center top / cover,
           url('background2.jpg') scroll left bottom / contain;
}

This creates a layered effect; the first image is a fixed background, and the second scrolls with the page.

Conclusion: Choosing the Right `background-attachment` Value

The CSS `background-attachment` property provides a simple yet powerful way to control how background images behave when a user scrolls. Understanding the differences between `scroll`, `fixed`, and `local` allows you to create various visual effects and enhance your web designs. Remember to consider browser compatibility, especially for older browsers or mobile devices. The best choice for `background-attachment` depends entirely on your project's specific design goals and desired user experience.