Giá trị content-box trong CSS

Sử dụng thuộc tính CSS background-origin để đặt giá trị content-box. Với giá trị content-box, hình ảnh nền bắt đầu từ góc trên bên trái của nội dung.

Ví dụ

Bạn có thể chạy mã sau để triển khai giá trị content-box:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #value1 {
        border: 3px solid blue;
        padding: 30px;
        background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
      #value2 {
        border: 3px solid orange;
        padding: 30px;
        background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
        background-repeat: no-repeat;
        background-origin: border-box;
      }
      #value3 {
        border: 3px dashed yellow;
        padding: 30px;
        background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
        background-repeat: no-repeat;
        background-origin: content-box;
      }
    </style>
  </head>
  <body>
    <h1>Giá trị padding-box</h1>
    <div id="value1">
      <h2>Tiêu đề 2</h2>
      <p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. <h3>Tiêu đề 3</h3> Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</p>
    </div>
    <h1>Giá trị border-box</h1>
    <div id="value2">
      <h2>Tiêu đề 2</h2>
      <p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. <h3>Tiêu đề 3</h3> Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</p>
    </div>
    <h1>Giá trị content-box</h1>
    <div id="value3">
      <h2>Tiêu đề 2</h2>
      <p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. <h3>Tiêu đề 3</h3> Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</p>
    </div>
  </body>
</html>