Lặp lại nền (Background Repeat) trong CSS

Thuộc tính background-repeat thiết lập cách hình ảnh nền được lặp lại trên trang web.

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

Ví dụ 1: repeat-x (lặp ngang)

<!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>Chi tiết</h1>
<p class="demo">Trung tâm thi gần trường ABC College.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>

Kết quả

Ví dụ 2: repeat-y (lặp dọc)

<!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>Chi tiết</h1>
<p class="demo">Trung tâm thi gần trường ABC College.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>

Kết quả

Các giá trị:

• repeat: Lặp cả ngang và dọc (mặc định)
• repeat-x: Chỉ lặp theo chiều ngang
• repeat-y: Chỉ lặp theo chiều dọc
• no-repeat: Không lặp, hiển thị 1 lần
• space: Lặp và phân bố đều, không cắt
• round: Lặp và co giãn để vừa khít