In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > backgroundAttachment

backgroundAttachment style property

Browser support:

Specifies or returns whether the backgroundImage should scroll with the contents of the object or not.

With this property you have control over how the background image behaves when the contents of the element are scrolled (stays in a fixed position, or scrolls with the contents, as it normally does).

When a fixed value is used with backgroundPosition, the position is relative to the client window of the browser. For that reason, the fixed value is used for the body object most of the cases.

Syntax:

object.backgroundAttachment;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: background-attachment

Possible values:

The type of this property is string.

One of the following values:

fixed

Background image stays fixed.

inherit

Takes the value of this property from the computed style of the parent element.

scroll

Default. Background image scrolls with the contents of the object.

Default: scroll.

Example HTML code 1:

This example illustrates the use of the background-attachment property:

<head>
    <style>
        .fixed {
            background-image: url("bg.jpg");
            background-repeat: repeat;
            background-attachment: fixed;
            overflow: scroll;
            width: 120px;
            height: 80px;
        }

        .scroll {
            background-image: url("bg.jpg");
            background-repeat: repeat;
            background-attachment: scroll;
            overflow: scroll;
            width: 120px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="fixed">
        Scroll the contents of the page. The background image will stay in a fixed position.
    </div>

    <div class="scroll">
        Scroll the contents of the page. The background image will scroll.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the backgroundAttachment property in JavaScript:

<head>
    <style>
        .example {
            background-image: url("bg.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position-x: center;
            background-position-y: center;
        }
    </style>

    <script type="text/javascript">
        function ToggleAttachment (elem) {
            var button = document.getElementById ("toggleButton");
            var attState = document.body.style.backgroundAttachment;

            button.innerHTML = (attState == "scroll")? "Change Attachment to scroll!" : "Change Attachment to fixed!";
            document.body.style.backgroundAttachment = (attState == "scroll")? "fixed" : "scroll";
        }
    </script>
</head>
<body class="example">
    <div style="height: 300px">
        Scroll the contents of the page and watch the background image.
    </div>

    <button id="toggleButton" onclick="ToggleAttachment (this);">Change Attachment to scroll!</button>
</body>