ตัวอย่าง
ทำซ้ำภาพพื้นหลังเพียงแนวตั้ง:
body
{
background-image: url("paper.gif");
background-repeat: repeat-y;
}
ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติพื้นหลังซ้ำชุดหาก / วิธีการที่ภาพพื้นหลังจะต้องทำซ้ำ
โดยค่าเริ่มต้นภาพพื้นหลังซ้ำแล้วซ้ำอีกได้ทั้งแนวตั้งและแนวนอน
Tip: ภาพพื้นหลังถูกวางไว้ตามสถานที่ให้บริการพื้นหลังตำแหน่ง ถ้าไม่มีพื้นหลังตำแหน่งที่มีการระบุภาพที่วางอยู่เสมอที่มุมบนซ้ายขององค์ประกอบ
| ค่าเริ่มต้น: | repeat |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | no. Read about animatable |
| เวอร์ชัน: | CSS1 |
| ไวยากรณ์ javascript: | object .style.backgroundRepeat="repeat-x" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 และก่อนหน้านี้ไม่สนับสนุนภาพพื้นหลังในหลายองค์ประกอบหนึ่ง
CSS ไวยากรณ์
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | เล่น |
|---|---|---|
| repeat | ภาพพื้นหลังจะต้องทำซ้ำได้ทั้งแนวตั้งและแนวนอน นี้จะเริ่มต้น | เล่น " |
| repeat-x | ภาพพื้นหลังจะต้องทำซ้ำเฉพาะแนวนอน | เล่น " |
| repeat-y | ภาพพื้นหลังจะต้องทำซ้ำเฉพาะแนวตั้ง | เล่น " |
| no-repeat | พื้นหลังภาพจะไม่ซ้ำ | เล่น " |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | เล่น " |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
วิธีการทำซ้ำภาพพื้นหลังได้ทั้งแนวตั้งและแนวนอน (เริ่มต้นสำหรับภาพพื้นหลัง):
body
{
background-image: url("paper.gif");
}
ลองตัวเอง» ตัวอย่าง
ภาพพื้นหลังซ้ำเท่านั้นแนวนอน:
body
{
background-image: url("paper.gif");
background-repeat: repeat-x;
}
ลองตัวเอง» ตัวอย่าง
แสดงภาพพื้นหลังเพียงครั้งเดียวโดยไม่ซ้ำ:
body
{
background-image: url("paper.gif");
background-repeat: no-repeat;
}
ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
CSS Tutorial: CSS พื้นหลัง
อ้างอิง CSS: คุณสมบัติพื้นหลังตำแหน่ง
อ้างอิง HTML DOM: backgroundRepeat property