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

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

ไวยากรณ์

selector {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

ค่า

ค่า	คำอธิบาย
`no-repeat`	รูปภาพจะไม่ถูกทำซ้ำเลย
`repeat-x`	รูปภาพจะถูกทำซ้ำบนแกน X
`repeat-y`	รูปภาพจะถูกทำซ้ำบนแกน Y
`repeat`	รูปภาพจะถูกทำซ้ำบนแกน X และบนแกน Y
`space`	รูปภาพจะถูกทำซ้ำหลายครั้งจนเต็มพื้นที่ทั้งหมด หากไม่สามารถทำได้ จะมีการเพิ่มช่องว่างระหว่างรูปภาพ
`round`	รูปภาพจะถูกทำซ้ำเพื่อให้พื้นที่สามารถใส่รูปภาพได้จำนวนเต็ม หากไม่สามารถทำได้ รูปภาพพื้นหลังจะถูกปรับขนาด

ค่าเริ่มต้น: repeat - คลุม ลวดลายทั่วทั้งหน้าจอ

ตัวอย่าง

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

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

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

ตัวอย่าง

มาทำให้รูปภาพไม่ทำซ้ำกัน:

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

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

ตัวอย่าง

คราวนี้ให้รูปภาพทำซ้ำบนแกน X:

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

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

ตัวอย่าง

คราวนี้บนแกน Y:

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

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

ตัวอย่าง

รูปภาพที่ทำซ้ำบนแกนสามารถกำหนดตำแหน่งได้ โดยใช้คุณสมบัติ background-position:

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

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

ตัวอย่าง

มาดูวิธีการทำงานของค่า space:

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

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

ตัวอย่าง

มาดูวิธีการทำงานของค่า round:

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

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

ดูเพิ่มเติม

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