Style backgroundAttachmentProperty
Style Object
Definition and Usage
The backgroundAttachment property sets or returns whether the background image is fixed or scrolls with the rest of the page.
Syntax
Set the backgroundAttachment property:
Object.style.backgroundAttachment="scroll|fixed|local"
Return the backgroundAttachment property:
Object.style.backgroundAttachment
| Value | Description |
|---|---|
| scroll | The background scrolls with the element. This is the default. |
| fixed | The background remains fixed. |
| local | The background scrolls with the element's content. |
Browser Support
All major browsers support the backgroundAttachment property.
Example
Example
Set the background image to fixed (non-scrolling):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<style type="text/css">
body{
background:#f3f3f3 url('img_tree.png') no-repeat right top;
}
</style>
<script>
function displayResult(){
document.body.style.backgroundAttachment="fixed";
}
</script>
</head>
<body>
<button type="button" onclick="displayResult()">Set the background image to fixed</button>
<br>
<h1>Hello World!</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<style type="text/css">
body{
background:#f3f3f3 url('img_tree.png') no-repeat right top;
}
</style>
<script>
function displayResult(){
document.body.style.backgroundAttachment="fixed";
}
</script>
</head>
<body>
<button type="button" onclick="displayResult()">Set the background image to fixed</button>
<br>
<h1>Hello World!</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
</html>
Try it Yourself »
More Examples
Switch between scrolling and fixed
Switching between scrolling and fixed backgroundAttachment.
Style Object Other Extensions