CSS background-repeat: Lặp lại hình nền

Thuộc tính CSS background-repeat được dùng để định nghĩa cách hình ảnh nền lặp lại chính nó.

Cú pháp

selector {
    background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | /* two-value syntax */;
}

Các giá trị đơn (Single value)

Giá trị	Mô tả
`repeat`	Lặp cả hai chiều (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ị một lần
`space`	Lặp, khoảng cách đều nhau, không cắt ảnh
`round`	Lặp, co giãn ảnh để vừa khít container

Cú pháp hai giá trị (Two-value syntax) - CSS3

background-repeat: repeat-x repeat-y; /* horizontal vertical */
background-repeat: space no-repeat;
background-repeat: round space;

Ví dụ 1: Lặp mặc định (repeat)

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

Ví dụ 2: space repeat

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    background-image: url("questions-answers.png");
    background-repeat: space repeat;
    min-height: 200px;
    padding: 20px;
}
</style>
</head>
<body>
<h2>Tutorials</h2>
<ul>
    <li>Java</li>
    <li>C#</li>
    <li>Ethereum</li>
    <li>DBMS</li>
    <li>OS</li>
</ul>
</body>
</html>

Kết hợp với background-position/size

.hero {
    background-image: url("pattern.png");
    background-repeat: repeat;
    background-position: center center;
    background-size: 200px; /* kiểm soát kích thước pattern */
}

/* Pattern diagonal */
.diagonal {
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
                      linear-gradient(-45deg, #ccc 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #ccc 75%),
                      linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    background-repeat: repeat;
}

Lưu ý

space và round hữu ích cho pattern nhỏ (icon, dots) — không bị cắt đứt ở rìa
Mặc định là repeat — luôn khai báo rõ ràng nếu không muốn lặp
Kết hợp với background-attachment: fixed cho hiệu ứng parallax