คุณสมบัติ background-repeat: ควบคุมการซ้ำของภาพพื้นหลัง

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

เพื่อควบคุมการซ้ำของภาพในพื้นหลัง ให้ใช้คุณสมบัติ background-repeat คุณสามารถใช้ค่า no-repeat หากไม่ต้องการให้ภาพซ้ำ ในกรณีนี้ภาพจะแสดงเพียงครั้งเดียว

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานของคุณสมบัติ background-repeat:

<html>
  <head>
    <style>
      body {
        background-image: url("/css/images/css.jpg");
        background-repeat: repeat;
      }
    </style>
  </head>
  <body>
    <p>Tutorials Point</p>
  </body>
</html>

ค่าที่ใช้ได้:

• repeat - ซ้ำทั้งแนวนอนและแนวตั้ง (ค่าเริ่มต้น)
• repeat-x - ซ้ำเฉพาะแนวนอน
• repeat-y - ซ้ำเฉพาะแนวตั้ง
• no-repeat - ไม่ซ้ำ แสดงเพียงครั้งเดียว
• space - ซ้ำและกระจายอย่างเท่าเทียม
• round - ซ้ำและปรับขนาดให้พอดี