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

คุณสมบัติ background-position กำหนด ตำแหน่งของรูปภาพพื้นหลังขององค์ประกอบ ตำแหน่งสามารถกำหนดได้โดยใช้ หน่วยใด ๆ สำหรับขนาด ค่าแรกหมายถึง ระยะห่างจากซ้าย ค่าที่สอง - ระยะห่างจากด้านบน

นอกจากนี้ยังสามารถกำหนดตำแหน่งด้วยคำสำคัญ ได้ ในกรณีนี้ลำดับของค่าไม่ใช่ เรื่องสำคัญ คำสำคัญสำหรับแนวตั้ง: top, center, bottom คำสำคัญสำหรับแนวนอน: left, center, right

วิธีการใช้คำสำคัญ

เพื่อวางรูปภาพด้วยคำสำคัญ จำเป็นต้องระบุหนึ่งค่าสำหรับแนวตั้ง และหนึ่งค่าสำหรับแนวนอน ตัวอย่างเช่น หากระบุ ค่า top right รูปภาพจะอยู่ ที่ด้านบนขวา

ลำดับของคำไม่สำคัญ: สามารถเขียน top right ได้ หรือเขียน right top ก็ได้ หาก มีคำสำคัญ center - สามารถละไว้ได้ ตัวอย่างเช่น top center ก็เหมือนกับ แค่ top ส่วน center center ก็เหมือนกับแค่ center

ไวยากรณ์

selector {
	background-position: two values separated by a space;
}

ตัวอย่าง

โดยค่าเริ่มต้น รูปภาพพื้นหลังจะอยู่ที่มุมบนซ้าย:

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

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

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่มุมบนขวากัน:

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

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

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่มุมล่างขวากัน:

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

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

ตัวอย่าง

มาวางรูปภาพพื้นหลังทางด้านขวา และกึ่งกลางตามแนวตั้งกัน:

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

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

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่กึ่งกลาง บล็อกกัน:

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

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

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่ระยะห่าง 20px จากซ้ายและ 40px จากด้านบน:

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

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

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่ระยะห่าง 90% จากซ้ายและ 100% จากด้านบน:

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

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

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่ระยะห่าง 30px จากซ้ายและที่ด้านล่างตามแนวตั้ง:

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

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

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่ระยะห่าง 30px จากซ้ายและกึ่งกลางตามแนวตั้ง:

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

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

ตัวอย่าง

มาวางรูปภาพพื้นหลังที่ระยะห่าง 30px จากด้านบนและกึ่งกลางตามแนวนอน:

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

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

ดูเพิ่มเติม

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