กำหนดตำแหน่ง Background Image ด้วย CSS background-origin

คุณสมบัติ background-origin ใช้ระบุตำแหน่งเริ่มต้นของ Background Image เทียบกับ Box Model

ตัวอย่าง

<html>
<head>
    <style>
        #demo {
            border: 5px dashed red;
            padding: 10px;
            background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
            background-origin: content-box; /* เริ่มจาก content area */
        }
    </style>
</head>
<body>
    <div id="demo">
        <h1>www.tutorialspoint.com</h1>
        <p>เนื้อหาตัวอย่าง...</p>
    </div>
</body>
</html>

ค่าที่ใช้ได้:

• padding-box (ค่าเริ่มต้น) — เริ่มจากขอบ Padding
• border-box — เริ่มจากขอบ Border
• content-box — เริ่มจากขอบ Content