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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > bgProperties (body)

bgProperties property (body)

Browser support:

Sets or retrieves whether the background picture, specified by the background property, is fixed or scrollable.

This property is deprecated. Use the backgroundAttachment style property instead.

Syntax:

object.bgProperties;

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

This property is read/write.

HTML page for this property: bgProperties

Possible values:

String that sets or retrieves the state of the scrolling.

One of the following values:

empty string

Default. Background picture can be scrolled.

fixed

Background picture is fixed and cannot be scrolled.

Default: empty string.

Example HTML code 1:

This example illustrates the use of the bgProperties attribute:

<body background="bg.gif" bgproperties="fixed">
    ...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />Scroll the document body!<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />
</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 style property:

<body style="background:url(bg.gif) fixed repeat;">
    ...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />Scroll the document body!<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the bgProperties property:

<head>
    <script type="text/javascript">
        function ChangeScrollProp () {
            var isScrollable = document.body.bgProperties;

            if ('bgProperties' in document.body) {
                document.body.bgProperties = (isScrollable == "fixed")? "" : "fixed";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body background="bg.gif" bgproperties="fixed">
    ...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />Scroll the document body!<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />

    <button onclick ="ChangeScrollProp ();">Change the background scroll property!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

Cross-browser example with the backgroundAttachment style property:

<head>
    <script type="text/javascript">
        function ChangeScrollProp () {
            var isFixed = document.body.style.backgroundAttachment;
            document.body.style.backgroundAttachment = (isFixed == "fixed")? "scroll" : "fixed";
        }
    </script>
</head>
<body style="background:url(bg.gif) fixed repeat;">
    ...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />Scroll the document body!<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />
    ...<br />...<br />...<br />...<br />...<br />...<br />...<br />...<br />

    <button onclick="ChangeScrollProp ();">Change the background scroll property!</button>
</body>