You are here: Reference > CSS > properties > background-attachment

background-attachment property

Browser support:
Specifies whether the background-image 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 background-position, the position is relative to the client window of the browser. For that reason, a fixed value is used for the body tag most of the cases.
JavaScript page for this property: backgroundAttachment. You can find other example(s) there.

Possible values:

 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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content