CSS background-attachment Property

Example

A background-image that will not scroll with the page (fixed):

body {
  background-image: url("img_heart.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Definition and Usage

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.

Default value:	scroll
Inherited:	no
Animatable:	no.
Version:	CSS1
JavaScript syntax:	object.style.backgroundAttachment="fixed"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which background-attachment is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
background-attachment	1.0	4.0	1.0	1.0	3.5

CSS Syntax

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

Property Values

Value	Description
scroll	The background image will scroll with the page. This is default
fixed	The background image will not scroll with the page
local	The background image will scroll with the element's contents
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

A background-image that will scroll with the page (scroll). This is default:

body {
  background-image: url("img_heart.gif");
  background-repeat: no-repeat;
  background-attachment: scroll;
}

Example

How to create a simple parallax scrolling effect (create an illusion of 3D depth):

.fixed-bg {
  /* The background image */
  background-image: url("img_road.jpg");

  /* Set a specified height, or the minimum height for the background image */
  min-height: 500px;

  /* Set background image to fixed (don't scroll along with the page) */
  background-attachment: fixed;

  /* Center the background image */
  background-position: center;

  /* Set the background image to no repeat */
  background-repeat: no-repeat;

  /* Scale the background image to be as large as possible */
  background-size: cover;
}

• The fixed-bg <div> will scroll, but its background image will be fixed. This causes a effect, where we the background image will be slowly hidden on scroll.