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
Property | Description |
---|---|
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ó. |
inherit | Kế 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:
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:
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:
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:
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:
- Google Chrome 5.0
- Edge 12
- Mozilla 4.0
- Safari 5.0
- Opera 11.1