Thuộc tính CSS background-origin

Thuộc tính background-origin trong CSS

Thuộc tính background-origin xác định **vị trí gốc (origin)** của hình nền - tức là điểm (0,0) của hình ảnh nền được đặt ở đâu so với box model của phần tử.

3 giá trị chính

Giá trị	Vị trí gốc (0,0)	Mô tả
`padding-box` (mặc định)	Góc trên-trái của padding	Hình nền bắt đầu từ cạnh trong của border
`border-box`	Góc trên-trái của border	Hình nền bắt đầu từ cạnh ngoài của border (nền lùi dưới border)
`content-box`	Góc trên-trái của content	Hình nền bắt đầu từ vùng nội dung (bỏ qua padding)

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      border: 10px dashed #333;
      padding: 20px;
      background-image: url("logo.png");
      background-repeat: no-repeat;
      margin-bottom: 30px;
      min-height: 100px;
    }
    .origin-padding { background-origin: padding-box; }
    .origin-border { background-origin: border-box; }
    .origin-content { background-origin: content-box; }
  </style>
</head>
<body>
  <div class="demo origin-padding">padding-box (mặc định)</div>
  <div class="demo origin-border">border-box - nền lùi dưới viền</div>
  <div class="demo origin-content">content-box - nền bắt đầu sau padding</div>
</body>
</html>

Mối quan hệ với background-clip

background-origin: Xác định **đâu là điểm bắt đầu** vẽ hình nền
background-clip: Xác định **đâu là điểm kết thúc** (cắt bớt) hình nền
Kết hợp cả hai để kiểm soát chính xác vùng hiển thị hình nền