การทำซ้ำพื้นหลังใน CSS (background-repeat)

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

background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit;

ตัวอย่างที่ 1: repeat-x (ทำซ้ำแนวนอน)

<!DOCTYPE html> <html> <head> <style> body {    background-image: url("https://www.tutorialspoint.com/images/Swift.png");    background-repeat: repeat-x;    background-color: blue;    color: white; } .demo {    text-decoration: overline underline; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near ABC College.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>

ผลลัพธ์

ตัวอย่างที่ 2: repeat-y (ทำซ้ำแนวตั้ง)

<!DOCTYPE html> <html> <head> <style> body {    background-image: url("https://www.tutorialspoint.com/images/Swift.png");    background-repeat: repeat-y;    background-color: orange;    color: white; } .demo {    text-decoration: overline underline; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near ABC College.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>

ผลลัพธ์

ค่าทั้งหมดและการใช้งาน

Two-value syntax (CSS Background Level 3+)

background-repeat: repeat-x repeat-y;  /* แยกแนวนอน/แนวตั้ง */
background-repeat: repeat no-repeat;   /* ซ้ำแนวนอน ไม่ซ้ำแนวตั้ง */
background-repeat: space round;        /* space แนวนอน round แนวตั้ง */

ร่วมกับ background-position

background: url('icon.png') no-repeat right top;
background: url('pattern.png') repeat-x center top;