คุณสมบัติ background-repeat ใน CSS (การซ้ำของพื้นหลัง)

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

ไวยากรณ์ (Syntax)

Selector {
  background-repeat: /*value*/;
}

ตัวอย่างที่ 1: Repeat (ค่าเริ่มต้น)

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url("https://www.tutorialspoint.com/images/microsoftproject.png");
      background-repeat: repeat;
    }
  </style>
</head>
<body></body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: Space Repeat

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      background-image: url("https://www.tutorialspoint.com/images/questions-answers.png");
      background-repeat: space repeat;
    }
  </style>
</head>
<body>
  <h2>Tutorials</h2>
  <ul>
    <li>Java</li> <li>C#</li> <li>Etherum</li> <li>DBMS</li> <li>OS</li>
  </ul>
</body>
</html>

ผลลัพธ์

ค่าของ background-repeat

รูปแบบ 2 ค่า (Two-value syntax)

background-repeat: repeat-x no-repeat;   /* แนวนอน: repeat, แนวตั้ง: no-repeat */
background-repeat: space round;          /* แนวนอน: space, แนวตั้ง: round */
background-repeat: no-repeat space;      /* แนวนอน: no-repeat, แนวตั้ง: space */

เคล็ดลับ

• ใช้ no-repeat ร่วม background-position: center และ background-size: cover สำหรับ Hero banner
• space และ round ใช้ได้ดีกับ Pattern/Texture ที่ต้องการเติมพื้นที่