CSS background-attachment Property

Thuộc tính background-attachment property xác định ảnh nền cuộn cùng trang hay cố định. Nó có ba giá trị: scroll (mặc định ảnh di chuyển cùng nội dung) fixed (ảnh giữ nguyên vị trí). Giá trị `local` (ảnh cuộn bên trong phần tử) cũng được hỗ trợ.

Cú pháp

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

Giá trị thuộc tính

PropertyDescription
scrollĐặt ảnh nền cố định so với phần tử chứa và cuộn cùng trang. Giá trị mặc định.
fixedĐặt ảnh nền cố định so với viewport.
localĐặt ảnh nền cuộn cùng nội dung của phần tử chứa nó.
initialĐặt thuộc tính background-attachment về giá trị mặc định của nó.
inheritKế thừa thuộc tính từ phần tử cha của nó.

Ví dụ 1: Sử dụng background-attachment: scroll

Trong ví dụ này chúng ta sử dụng thuộc tính background-attachment: scroll.

html
<!DOCTYPE html>
<html>

<head>
    <title>
        background-attachment property
    </title>

    <style>
        #example {
            background-image:
                url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: scroll;
        }
    </style>
</head>

<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2> background-attachment: scroll;</h2><br><br>

    <div id="example">
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful.
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>
        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>

    </div>
</body>

</html>

Output: css-background-attachment-property

Ví dụ 2: Sử dụng background-attachment: fixed

Trong ví dụ này chúng ta sử dụng thuộc tính background-attachment : fixed.

html
<!DOCTYPE html>
<html>
  
<head>
    <title>
        background-attachment property
    </title>

    <style>
        #example {
            background-image:
                url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>

<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2> background-attachment: fixed;</h2><br><br>

    <div id="example">

        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful.
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>
    </div>
</body>
  
</html>

Output: css-background-attachment-property

Ví dụ 3: Sử dụng background-attachment: local

Trong ví dụ này chúng ta sử dụng thuộc tính background-attachment: local.

html
<!DOCTYPE html>
<html>
<head>
    <title>
        background-attachment property
    </title>

    <style>
        #example {
            background-image:
                url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: local;
        }
    </style>
</head>

<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2> background-attachment: local;</h2><br><br>

    <div id="example">

        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful.
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>

    </div>
</body>
</html>

Output:

css-background-attachment-property

Ví dụ 4: Sử dụng background-attachment: initial

Trong ví dụ này chúng ta sử dụng thuộc tính background-attachment: initial.

html
<!DOCTYPE html>
<html>
  
<head>
    <title>
        background-attachment property
    </title>

    <style>
        #example {
            background-image:
                url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: initial;
        }
    </style>
</head>

<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2> background-attachment: initial;</h2><br><br>

    <div id="example">
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful.
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>


        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>

        <br>
        <br>
        <br>
        <p>
            This course is especially designed for the
            Java apprentices who want to hone their
            skills in Java for Coding Interviews and
            Competitive Programming. No matter if you
            are a school student or college student,
            if you have the zeal of programming, this
            is the right time to start.
        </p>

        <br>
        <br>
        <br>
        <p>
            Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon,
            Adobe etc with a free online placement
            preparation course. The course focuses on
            various MCQ's & Coding question likely to
            be asked in the interviews & make your
            upcoming placement season efficient and
            successful
        </p>

    </div>
</body>
  
</html>

Output: css-background-attachment-property

Các trình duyệt được hỗ trợ

Các trình duyệt được hỗ trợ bởi background-attachment property được liệt kê dưới đây:


Last Updated : 21/07/2025