Javascript Reference - HTML DOM Style backgroundAttachment Property

The backgroundAttachment property sets or gets whether to scroll or fix a background image with the content.

Browser Support


`backgroundAttachment`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the backgroundAttachment property:

var v = object.style.backgroundAttachment

Set the backgroundAttachment property:

object.style.backgroundAttachment=scroll|fixed|local|initial|inherit

Property Values

scroll: Default. The background scrolls with the element.
fixed: The background is fixed with the viewport.
local: The background scrolls with the element's contents.

Technical Details

Default Value:	scroll
Return Value:	A string representing background-attachment property
CSS Version	CSS1

Example

The following code shows how to set a background-image to be fixed.


<!DOCTYPE html>
<html>
<head>
<style>
body {<!--from w w  w.j  a v  a2s. c  o  m-->
    background: #f3f3f3 url('http://java2s.com/style/demo/border.png') no-repeat right top;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<button onclick="myFunction()">test</button>
<br> 
 
<script>
function myFunction() {
    document.body.style.backgroundAttachment = "fixed";
}
</script>

<p>test<br><br><br><br>test<br><br><br><br>
test<br><br><br><br>test<br><br><br><br>
</p>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows the difference between scroll and local background for a DIV element.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from   w  w w .j a va2s  . c om-->
    width: 300px;
    height: 300px;
    background: lightblue url('http://java2s.com/style/demo/border.png') no-repeat;
    color: white;
    overflow: auto;
}
</style>
</head>
<body>
<form name="myForm">
  <input type="radio" name="myAtt" value="scroll" onclick="myFunction()" checked>scroll
  <input type="radio" name="myAtt" value="local" onclick="myFunction()">local
</form>

<div id="myDIV">
  text <br/>text <br/>text <br/>text <br/>
  text <br/>text <br/>text <br/>text <br/>
  text <br/>text <br/>text <br/>text <br/>
</div>

<script>
function myFunction() {
    if (document.forms["myForm"]["myAtt"][0].checked) {
      document.getElementById("myDIV").style.backgroundAttachment = "scroll";
    } else {
      document.getElementById("myDIV").style.backgroundAttachment = "local";
    }
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the value of the background-attachment property.


<!DOCTYPE html>
<html>
<body style="background:#f3f3f3 url('http://java2s.com/style/demo/border.png') no-repeat fixed;">
<!-- ww w.  j  a va2  s.c  o  m-->
<h1>Hello World!</h1>

<p>The background-image is fixed.</p>
<p>The background-image is fixed.</p>
<p>The background-image is fixed.</p>
<p>The background-image is fixed.</p>
<p>The background-image is fixed.</p>
<p>The background-image is fixed.</p>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.body.style.backgroundAttachment);
}
</script>

</body>
</html>

The code above is rendered as follows: