background-attachment property

Specifies how the background image (or images) is attached to the object within the document.

CSS Backgrounds and Borders Module Level 3, Section 3.5CSS 2.1, Section 14.2.1

 

Syntax

background-attachment: scroll | fixed | local [ , scroll | fixed | local ]*

Property values

One of the following values:

scroll

Initial value. Background image scrolls with the object as the document is scrolled.

fixed

Background image stays fixed within the viewable area of the object.

local

Internet Explorer 9 and later. Background image stays fixed with regard to the element's contents: if the element has a scrolling mechanism, the background scrolls with the element's contents.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valuescroll

Standards information

Remarks

This property can be set with the other background properties by using the background composite property.

Starting in Internet Explorer 9, the background of an element can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-background-attachment" as an alias for this property.

Examples

The following examples use the background-attachment CSS property and the backgroundAttachment scripting property to set the background to "fixed", so that the background does not scroll with the text.

This example uses an inline style sheet to set the background to fixed.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/background-attachment.htm

HTML
Copy 

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>MyBackgroundAttachment</title>
<style type="text/css">
body {
  background-image: url('marble.jpg');
  background-attachment: fixed;
}
</style>
</head>

<body>

</body>

</html>

This example uses inline scripting to set the background to fixed.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/backgroundAttachment.htm

HTML
Copy 

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>MyBackgroundAttachment</title>
<style type="text/css">
body {
  background-image: url('cone.jpg');
}
</style>
</head>

<body id="oBdy" onload="oBdy.style.backgroundAttachment = 'fixed'">

</body>

</html>

See also

CSSStyleDeclaration
currentStyle
defaults
LayoutRect
runtimeStyle
style

 

 

Show: