Thuộc tính background-origin trong CSS
Bùi Tấn Lực - 887
- 05/10/2025
Chức năng của Thuộc tính background-origin trong CSS
Thuộc tính background-origin trong CSS dùng để quy định cách hiển thị của hình nền so với border-top, border-left, padding-top, padding-left trên phần tử HTML.
Code Thuộc tính background-origin trong CSS
Các giá trị của thuộc tính background-origin trong CSS
background-origin: border-box (background phủ tất cả border)
background-origin: content-box (background trong border-top và border-left và trong padding-top và padding-left)
background-origin: padding-box (background trong border-top và border-left)
<!DOCTYPE html>
<html>
<head>
<title>Các giá trị của thuộc tính background-origin trong CSS</title>
<style>
div {
background-image: url(https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg);
border: 10px dashed red;
padding: 25px;
background-repeat: no-repeat;
color:red;
margin-bottom:15px;
}
</style>
</head>
<body>
<h1>Các giá trị của thuộc tính background-origin trong CSS</h1>
<div style="background-origin: padding-box;">
<p>background-origin: padding-box (background trong border-top và border-left)</p>
</div>
<div style="background-origin: border-box;">
<p>background-origin: border-box (background phủ tất cả border)</p>
</div>
<div style="background-origin: content-box;">
<p>background-origin: content-box (background trong border-top và border-left và trong padding-top và padding-left)</p>
</div>
</body>
</html>
Kết hợp các giá trị của thuộc tính background-origin trong CSS
background-origin: content-box, border-box;
background-origin: content-box, content-box;
background-origin: content-box, padding-box;
<!DOCTYPE html>
<html>
<head>
<title>Kết hợp các giá trị của thuộc tính background-origin trong CSS</title>
<style>
div {
background-image: url(https://webmoi.vn/thumuc/bg-cay.png), url(https://webmoi.vn/thumuc/bg-nho.jpg);
border: 10px dashed red;
padding: 25px;
background-repeat: no-repeat;
color:red;
margin-bottom:15px;
}
</style>
</head>
<body>
<h1>Kết hợp các giá trị của thuộc tính background-origin trong CSS</h1>
<div style="background-origin: content-box, padding-box;">
<p>background-origin: content-box, padding-box;</p>
</div>
<div style="background-origin: content-box, border-box;">
<p>background-origin: content-box, border-box;</p>
</div>
<div style="background-origin: content-box, content-box;">
<p>background-origin: content-box, content-box;</p>
</div>
</body>
</html>
Cách chọn giá trị background-origin phù hợp trong CSS
Việc chọn background-origin nên dựa vào vùng mà bạn muốn hình nền bắt đầu hiển thị. Nếu muốn nền bao phủ cả đường viền, border-box là lựa chọn phù hợp. Khi cần giữ nền trong khu vực bên trong đường viền, có thể dùng padding-box. Còn content-box thích hợp khi hình nền chỉ nên xuất hiện quanh phần nội dung.
Khi nào nên dùng background-origin: border-box?
Chọn border-box khi hình nền cần bắt đầu từ mép ngoài của phần tử và có thể nằm phía sau cả border. Cách này phù hợp với các thành phần cần tạo cảm giác nền liền mạch từ ngoài vào trong, chẳng hạn nút có viền hoặc khối trang trí có đường viền rõ ràng.
Giá trị này đặc biệt hữu ích khi bạn muốn hình nền bao phủ toàn bộ khu vực của phần tử mà không để đường viền trở thành ranh giới của hình nền.
Khi nào nên dùng background-origin: padding-box?
padding-box phù hợp khi muốn hình nền bắt đầu từ vùng padding và không mở rộng ra phía sau border. Đây là lựa chọn dễ kiểm soát khi phần tử có đường viền riêng và bạn muốn giữ phần nền bên trong đường viền.
Trong giao diện thông thường, đây cũng là giá trị phù hợp khi hình nền cần phủ phần bên trong của hộp nhưng không ảnh hưởng đến khu vực đường viền.
Khi nào nên dùng background-origin: content-box?
Chọn content-box khi hình nền chỉ nên được định vị dựa trên vùng chứa nội dung. Cách này hữu ích với các thành phần có khoảng padding tương đối lớn nhưng hình nền cần tách khỏi khoảng đệm.
Giá trị này thường phù hợp với những thiết kế cần kiểm soát chặt vị trí bắt đầu của hình nền, đặc biệt khi phần nội dung là khu vực chính mà hình nền cần nhấn mạnh.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính background-origin trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
