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

คุณสมบัติ background-attachment กำหนด วิธีการเลื่อนภาพพื้นหลังของ องค์ประกอบ: พร้อมกับข้อความ หรือให้ข้อความ เลื่อนไหลไปบนภาพ

ไวยากรณ์

selector {
	background-attachment: fixed | scroll | local;
}

ค่า

ค่า	คำอธิบาย
`fixed`	ภาพพื้นหลังจะอยู่กับที่ และข้อความจะเลื่อนไหลไปบนมัน
`scroll`	ภาพพื้นหลังจะเลื่อนไปพร้อมกับข้อความ
`local`	พื้นหลังถูกตรึงโดยคำนึงถึงพฤติกรรมขององค์ประกอบ หากองค์ประกอบมีการเลื่อน พื้นหลังจะเลื่อนไปพร้อมกับเนื้อหา แต่พื้นหลังที่เกินขอบเขตขององค์ประกอบจะยังคงอยู่ที่เดิม

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

ตัวอย่าง . ค่า scroll

ตอนนี้คุณสมบัติ background-attachment ถูกตั้งค่าเป็น scroll ลองเลื่อน องค์ประกอบในแนวตั้ง - คุณจะเห็นว่าข้อความ เลื่อนไปพร้อมกับพื้นหลัง:

<body>
	<div id="elem">
		some long text
	</div>
</body>

body {
	background-attachment: scroll;
	background-image: url("bg.png");
}

#elem {
	width: 400px;
	margin: 0 auto;
	text-align: justify;
	font-weight: bold;
	font-size: 20px;
}

ตัวอย่าง . ค่า fixed

และตอนนี้คุณสมบัติ background-attachment ถูกตั้งค่าเป็น fixed ลองเลื่อน องค์ประกอบในแนวตั้ง - คุณจะเห็นว่าข้อความ เลื่อนไหลไปบนพื้นหลัง:

<body>
	<div id="elem">
		some long text
	</div>
</body>

body {
	background-attachment: fixed;
	background-image: url("bg.png");
}

#elem {
	width: 400px;
	margin: 0 auto;
	text-align: justify;
	font-weight: bold;
	font-size: 20px;
}

ดูเพิ่มเติม

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