คุณสมบัติ background-origin

คุณสมบัติ background-origin กำหนด ว่ารูปภาพพื้นหลัง (เฉพาะรูปภาพเท่านั้น ไม่ใช่การเติมสีพื้นหลัง) จะถูกจัดวางสัมพันธ์กับ องค์ประกอบอย่างไร: ส่วนหนึ่งของรูปภาพพื้นหลังจะล้ำเข้าไป ใต้เส้นขอบ, พื้นหลังจะไม่ล้ำเข้าไปใต้เส้นขอบ หรือพื้นหลังจะถูกจัดวางเฉพาะเหนือเนื้อหาของ องค์ประกอบเท่านั้น (นั่นคือ padding จะผลักพื้นหลังให้ห่างออกไป)

ไวยากรณ์

ตัวเลือก {
	background-origin: padding-box | border-box | content-box;
}

ค่า

ค่า	คำอธิบาย
`border-box`	รูปภาพพื้นหลังจะล้ำเข้าไปใต้เส้นขอบ
`padding-box`	รูปภาพพื้นหลังจะไม่ล้ำเข้าไปใต้เส้นขอบ
`content-box`	รูปภาพพื้นหลังจะอยู่เฉพาะเหนือเนื้อหาเท่านั้น

ค่าเริ่มต้น: padding-box

หมายเหตุ

คุณสมบัติ background-origin จะไม่ทำงาน เมื่อ background-attachment มีค่าเป็น fixed และเมื่อ background-repeat มีค่าเป็น repeat คุณสมบัติ background-origin จะทำงานเสมอ เหมือนกับค่าที่เป็น border-box

ตัวอย่าง . ค่าเริ่มต้น

โดยค่าเริ่มต้น พื้นหลังจะไม่ล้ำเข้าไปใต้เส้นขอบ:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

ตัวอย่าง . ค่า border-box

ตอนนี้พื้นหลังจะล้ำเข้าไปใต้เส้นขอบ:

<div id="elem"></div>

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

ตัวอย่าง . ค่า content-box

และตอนนี้พื้นหลังจะถูกผลักให้ห่างออกไปด้วย padding:

<div id="elem"></div>

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

ตัวอย่าง . เมื่อ background-repeat: repeat

เมื่อ background-repeat มีค่าเป็น repeat คุณสมบัติ background-origin จะทำงานเสมอ เหมือนกับค่าที่เป็น border-box นั่นคือพื้นหลัง จะล้ำเข้าไปใต้เส้นขอบเสมอ:

<div id="elem"></div>

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

ดูเพิ่มเติม

คุณสมบัติ background-clip
ซึ่งกำหนดตำแหน่งสำหรับทั้งรูปภาพพื้นหลังและการเติมสีพื้นหลัง
คุณสมบัติ background
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับพื้นหลัง