CSS - background-attachment Property

Quiz

CSS background-attachment property determines whether the position of an image on a background is fixed within the viewport, or scrolls within its container.

Syntax

background-attachment: scroll | fixed | local | initial | inherit;

Property Values

Value	Description
fixed	This specifies that the background image will not scroll with the page.
local	This specifies that the background image will scroll with the element's contents
scroll	This specifies that the background image will scroll with the page. Default value.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Background Attachment

Below are described some examples of the background-attachment property with different values.

No Scroll with the Page

To prevent the background image from scrolling we use the value fixed.The following example demonstrates the background-attachment: fixed property which fixes the background image relative to the viewport

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .fixed {
            background-image: url('images/logo.png');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: left top;
            background-color: lightblue;
            background-size: 40% 30%;
            padding: 5rem;
            width: 800px;
            height: 500px;
        }
    </style>
</head>

<body>
    <h2>CSS background-attachment Property</h2>
    <div class="fixed">
        <p>
            Lorem Ipsum is simply dummy text of the printing 
            and typesetting industry. Lorem Ipsum has been the 
            industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and 
            scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also 
            the leap into electronic typesetting, remaining 
            essentially unchanged. It was popularised in the 
            1960s with the release of Letraset sheets containing 
            Lorem Ipsum passages, and more recently with desktop 
            publishing software like Aldus PageMaker including 
            versions of Lorem Ipsum.
        </p>
    </div>
</body>

</html>

Scroll with Element Content

To make the background image scroll with the element's content, we use local value.The following example demonstrates the background-attachment: scroll property which scrolls the background image with the content

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .scroll {
            background-image: url('images/logo.png');
            background-repeat: no-repeat;
            background-attachment: local;
            background-position: left top;
            background-color: lightblue;
            background-size: 40% 30%;
            padding: 5rem;
            width: 800px;
            height: 500px;
        }
    </style>
</head>

<body>
    <h2>CSS background-attachment Property</h2>
    <div class="scroll">
        <p>
            Lorem Ipsum is simply dummy text of the printing 
            and typesetting industry. Lorem Ipsum has been the 
            industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and 
            scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also 
            the leap into electronic typesetting, remaining 
            essentially unchanged. It was popularised in the 
            1960s with the release of Letraset sheets containing 
            Lorem Ipsum passages, and more recently with desktop 
            publishing software like Aldus PageMaker including 
            versions of Lorem Ipsum.
        </p>
    </div>
</body>

</html>

Scroll with the Page

To make the background image scroll with the page, we use the scroll value.The following example demonstrates the background-attachment: scroll property which fixes the background image relative to the element's contents

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .local {
            background-image: url('images/logo.png');
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: left top;
            background-color: lightblue;
            background-size: 40% 30%;
            padding: 5rem;
            width: 800px;
            height: 500px;
        }
    </style>
</head>

<body>
    <h2>CSS background-attachment Property</h2>
    <div class="local">
        <p>
            Lorem Ipsum is simply dummy text of the printing 
            and typesetting industry. Lorem Ipsum has been the 
            industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and 
            scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also 
            the leap into electronic typesetting, remaining 
            essentially unchanged. It was popularised in the 
            1960s with the release of Letraset sheets containing 
            Lorem Ipsum passages, and more recently with desktop 
            publishing software like Aldus PageMaker including 
            versions of Lorem Ipsum.
        </p>
    </div>
</body>

</html>

Supported Browsers

Property
background-image	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page