HTML - DOM Style Object backgroundAttachment Property

Quiz

HTML DOM Style Object backgroundAttachment property is used to set or return whether the background image should scroll with the content or remain fixed.

Syntax

Given below are the syntax to get or set the backgroundAttachment property.

Set the backgroundAttachment property:

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

Get the backgroundAttachment property:

object.style.backgroundAttachment;

Property Values

Value	Description
scroll	This is the default value which allows background image to scroll along with the document.
fixed	This value makes background image fixed with regard to viewport.
local	This allows background image to scroll along with the element's content.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value representing how background image is attached to the object within document.

Examples of HTML DOM Style Object 'backgroundAttachment' Property

The following examples illustrates different property values of backgroundAttachment

Set Background to 'scroll'

The following example sets the background attachment to scroll which allows image to scroll with the element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundAttachment Property
    </title>
    <style>
        body {
            background: #f3f3f3 url('html/images/logo.png') no-repeat right top;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to change the attachment to fixed.</p>
    <button onclick="scroll()">Scroll</button>
    <script>
        function scroll() {
            document.body.style.backgroundAttachment = "scroll";
        }
    </script>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
</body>
</html>

Set Background to 'fixed'

The following example sets the background attachment to fixed which allows image to remain fixed when element scrolls.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundAttachment Property
    </title>
    <style>
        body {
            background: #f3f3f3 url('html/images/logo.png') no-repeat right top;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to change the attachment to fixed.</p>
    <button onclick="fix()">Fixed</button>
    <script>
        function fix() {
            document.body.style.backgroundAttachment = "fixed";
        }
    </script>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
</body>
</html>

Set Background to 'local'

The following example sets the background attachment to local which allows image to scroll along with element's content.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundAttachment Property
    </title>
    <style>
        body {
            background: #f3f3f3 url('html/images/logo.png') no-repeat right top;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to change the attachment to local.</p>
    <button onclick="local()">local</button>
    <script>
        function local() {
            document.body.style.backgroundAttachment = "local";
        }
    </script>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <p>Random text to scroll...</p>
    <br><br><br><br><br>
    <br><br><br><br><br>
</body>
</html>

Supported Browsers

Property
backgroundAttachment	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page