ทำให้ภาพพื้นหลังซ้ำด้วย CSS (background-repeat)

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

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

ตัวอย่าง

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

<html>
  <head>
    <style>
      body {
        background-image: url("/images/seaborn-4.jpg?v=2");
        background-repeat: repeat;
      }
    </style>
  </head>
  <body>
    <p>Tutorials Point</p>
  </body>
</html>

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

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