คุณสมบัติพื้นหลังซ้ำ CSS

❮ ก่อนหน้า อ้างอิงCSS ที่สมบูรณ์ ถัดไป ❯

ตัวอย่าง

ทำซ้ำภาพพื้นหลังในแนวตั้งเท่านั้น:

body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}

ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง

ความหมายและการใช้งาน

คุณสมบัติbackground-repeatกำหนดว่ารูปภาพพื้นหลังจะทำซ้ำหรือไม่

โดยค่าเริ่มต้น ภาพพื้นหลังจะทำซ้ำทั้งในแนวตั้งและแนวนอน

เคล็ดลับ:ภาพพื้นหลังถูกวางตาม คุณสมบัติตำแหน่งพื้นหลัง หากไม่ได้ระบุตำแหน่งพื้นหลังไว้ รูปภาพจะถูกวางไว้ที่มุมซ้ายบนขององค์ประกอบเสมอ

ค่าเริ่มต้น:	ทำซ้ำ
รับการถ่ายทอด:	ไม่
เคลื่อนไหวได้:	ไม่. อ่านเกี่ยวกับแอนิเมชั่น
รุ่น:	CSS1
ไวยากรณ์ JavaScript:	วัตถุ .style.backgroundRepeat="repeat-x"

รองรับเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

หมายเหตุ: IE8 และรุ่นก่อนหน้าไม่รองรับภาพพื้นหลังหลายภาพในองค์ประกอบเดียว

ไวยากรณ์ CSS

มูลค่าทรัพย์สิน

Value	Description	Play it
repeat	The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default
repeat-x	The background image is repeated only horizontally
repeat-y	The background image is repeated only vertically
no-repeat	The background-image is not repeated. The image will only be shown once
space	The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round	The background-image is repeated and squished or stretched to fill the space (no gaps)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

ตัวอย่างเพิ่มเติม

ตัวอย่าง

ทำซ้ำภาพพื้นหลังทั้งในแนวตั้งและแนวนอน (ซึ่งเป็นค่าเริ่มต้น):

body {
background-image: url("paper.gif");
background-repeat: repeat;
}

ตัวอย่าง

ทำซ้ำภาพพื้นหลังในแนวนอนเท่านั้น:

body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}

ตัวอย่าง

อย่าใช้ภาพพื้นหลังซ้ำ รูปภาพจะแสดงเพียงครั้งเดียว:

body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}

ตัวอย่าง

ใช้ background-repeat: space และ background-repeat: รอบ:

#example2 {
border: 2px solid black;
padding: 25px;
  background: url("w3css.gif");
background-repeat: space;
}

#example3 {
  border: 1px solid black;
padding: 25px;
background: url("w3css.gif");
  background-repeat: round;
}

ตัวอย่าง

ใช้คุณสมบัติพื้นหลังที่แตกต่างกันเพื่อสร้างภาพ "ฮีโร่":

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}