คำอธิบาย
การทำซ้ำพื้นหลังกำหนดทิศทางที่จะทำซ้ำภาพพื้นหลัง (ถ้ามี)
ค่าที่เป็นไปได้
repeat - ทำให้ภาพพื้นหลังซ้ำตามแกนแนวนอนและแนวตั้ง
repeat-x - ทำให้ภาพพื้นหลังซ้ำตามแกน x
repeat-y - ทำให้ภาพพื้นหลังซ้ำตามแกน y
no-repeat - ป้องกันไม่ให้ภาพพื้นหลังซ้ำเลย
นำไปใช้กับ
องค์ประกอบ HTML ทั้งหมด
ไวยากรณ์ DOM
object.style.backgroundRepeat = "Any of the above values";
ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างที่สาธิตวิธีการทำซ้ำภาพพื้นหลังหากภาพมีขนาดเล็ก คุณสามารถใช้ค่าno-repeatสำหรับคุณสมบัติbackground-repeat ได้หากคุณไม่ต้องการสร้างภาพซ้ำในกรณีนี้ภาพจะแสดงเพียงครั้งเดียว
โดยค่าเริ่มต้นคุณสมบัติการทำซ้ำพื้นหลังจะมีค่าซ้ำ
<html>
<head>
<style>
body {
background-image: url("/https/isolution.pro/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ต่อไปนี้เป็นตัวอย่างที่สาธิตวิธีการทำซ้ำภาพพื้นหลังในแนวตั้ง
<html>
<head>
<style>
body {
background-image: url("/https/isolution.pro/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ต่อไปนี้เป็นตัวอย่างที่สาธิตวิธีการทำซ้ำภาพพื้นหลังในแนวนอน
<html>
<head>
<style>
body {
background-image: url("/https/isolution.pro/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
มันจะให้ผลลัพธ์ดังต่อไปนี้ -