Sử dụng CSS background-origin thuộc tính để đặt giá trị hộp nội dung. Với giá trị hộp nội dung, hình nền bắt đầu từ góc trên bên trái của nội dung.
Bạn có thể thử chạy mã sau để triển khai giá trị hộp nội dung:
Ví dụ
<!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>padding-box value</h1>
<div id = "value1">
<h2>Heading 2</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
<h3>Heading 3</h3>
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
</div>
<h1>border-box value</h1>
<div id = "value2">
<h2>Heading 2</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
<h3>Heading 3</h3>
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
</div>
<h1>content-box value</h1>
<div id = "value3">
<h2>Heading 2</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
<h3>Heading 3</h3>
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
</div>
</body>
</html>