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

คุณสมบัติ background-image กำหนดรูปภาพพื้นหลังให้กับ องค์ประกอบ โดยค่าเริ่มต้น รูปภาพ จะปูกระเบื้องตัวเองด้วยสำเนาของมันทั้งบล็อก อย่างไรก็ตาม, พฤติกรรมนี้สามารถยกเลิกได้ด้วยคุณสมบัติ background-repeat

ไวยากรณ์

ตัวเลือก {
	background-image: url(เส้นทางไปยังรูปภาพ);
}

ตัวเลือก {
	background-image: none;
}

ค่า

ค่า	คำอธิบาย
`url`	เส้นทางไปยังไฟล์รูปภาพ ชื่อรูปภาพอาจอยู่ในเครื่องหมายคำพูดคู่ เครื่องหมายคำพูดเดี่ยว หรือไม่มีเครื่องหมายคำพูดเลย
`none`	ยกเลิกรูปภาพพื้นหลังสำหรับองค์ประกอบ

ค่าเริ่มต้น: none

ตัวอย่าง

มากำหนดรูปภาพพื้นหลังด้วย background-image โดยห้ามไม่ให้มันทำซ้ำด้วยคุณสมบัติ background-repeat:

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

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

ตัวอย่าง

หากไม่มี background-repeat รูปภาพพื้นหลัง จะปูกระเบื้องทั้งบล็อก:

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

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

ตัวอย่าง

สามารถกำหนดทั้งรูปภาพพื้นหลัง และกำหนดสีพื้นหลังได้พร้อมกันด้วย background-color ในกรณีนี้ บริเวณที่ไม่มีรูปภาพพื้นหลัง สีพื้นหลังจะปรากฏ:

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

#elem {
	background-color: orange;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

ดูเพิ่มเติม

คุณสมบัติ background
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับพื้นหลัง