Thuộc tính background-repeat trong CSS
Bùi Tấn Lực - 884
- 04/10/2025
Chức năng của Thuộc tính background-repeat trong CSS
Thuộc tính background-repeat trong CSS dùng để quy định cách lặp lại của một hay nhiều background hình ảnh.
Code Thuộc tính background-repeat trong CSS
Thuộc tính background-repeat repeat-y trong CSS
Background lặp theo chiều dọc:
background-repeat: repeat-y;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-repeat repeat-y trong CSS</title>
<style>
body {
background-image: url("https://webmoi.vn/thumuc/bg-nho.jpg");
}
</style>
</head>
<body style="background-repeat: repeat-y;">
<h1>Thuộc tính background-repeat repeat-y trong CSS</h1>
<p>Background lặp theo chiều dọc:</p>
</body>
</html>
Thuộc tính background-repeat repeat-x trong CSS
Background lặp theo chiều ngang:
background-repeat: repeat-x;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-repeat repeat-x trong CSS</title>
<style>
body {
background-image: url("https://webmoi.vn/thumuc/bg-nho.jpg");
}
</style>
</head>
<body style="background-repeat: repeat-x;">
<h1>Thuộc tính background-repeat repeat-x trong CSS</h1>
<p>Background lặp theo chiều ngang:</p>
</body>
</html>
Thuộc tính background-repeat repeat trong CSS
Background lặp theo chiều dọc lẫn chiều ngang:
background-repeat: repeat;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-repeat repeat trong CSS</title>
<style>
body {
background-image: url("https://webmoi.vn/thumuc/bg-nho.jpg");
}
</style>
</head>
<body style="background-repeat: repeat;">
<h1>Thuộc tính background-repeat repeat trong CSS</h1>
<p>Background lặp theo chiều dọc lẫn chiều ngang:</p>
</body>
</html>
Thuộc tính background-repeat no-repeat trong CSS
Background không có lặp lại:
background-repeat: no-repeat;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-repeat no-repeat trong CSS</title>
<style>
body {
background-image: url("https://webmoi.vn/thumuc/bg-cay.png");
}
</style>
</head>
<body style="background-repeat: no-repeat;">
<h1>Thuộc tính background-repeat no-repeat trong CSS</h1>
<p>Background không có lặp lại:</p>
</body>
</html>
Thuộc tính background-repeat kết hợp trong CSS
Repeat vị trí 1 sẽ tương ứng hình 1, repeat vị trí 2 tương ứng với hình 2:
background-repeat: no-repeat, repeat;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-image no-repeat, repeat trong CSS</title>
<style>
body {
background-color: #cccccc;
color:yellow
}
</style>
</head>
<body style="background-image: url('https://webmoi.vn/thumuc/bg-cay.png'), url('https://webmoi.vn/thumuc/bg-nho.jpg'); background-repeat: no-repeat, repeat;">
<h1>Thuộc tính background-image no-repeat, repeat trong CSS</h1>
<p>Xin chào</p>
</body>
</html>
Thuộc tính background-repeat vuông, tròn trong CSS
background-repeat: round; (tròn)
background-repeat: space; (vuông)
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính background-repeat vuông, tròn trong CSS</title>
<style>
div{margin-bottom:10px}
#example2 {
border: 2px solid black;
padding: 25px;
background: url("https://webmoi.vn/thumuc/bg-vuong.jpg");
}
#example3 {
border: 1px solid black;
padding: 25px;
background: url("https://webmoi.vn/thumuc/bg-vuong.jpg");
}
</style>
</head>
<body>
<h1>Thuộc tính background-repeat vuông, tròn trong CSS</h1>
<div id="example2" style="background-repeat: space;">
<h3>background-repeat: space (vuông)</h3>
</div>
<div id="example3" style=" background-repeat: round;">
<h3>background-repeat: round (tròn)</h3>
</div>
</body>
</html>
Cách kết hợp background-repeat với nhiều hình nền trong CSS
Khi một phần tử sử dụng nhiều hình nền, mỗi hình có thể đảm nhận một vai trò khác nhau và cần cách lặp riêng. CSS cho phép khai báo nhiều giá trị background-repeat theo cùng thứ tự với các lớp hình nền, nhờ đó có thể kiểm soát chính xác cách từng ảnh được hiển thị.
Thiết lập background-repeat riêng cho từng hình nền
Mỗi hình nền được ngăn cách bằng dấu phẩy trong thuộc tính background-image. Các giá trị của background-repeat cũng được đặt theo thứ tự tương ứng. Điều này giúp một ảnh lặp lại để tạo họa tiết, trong khi ảnh khác chỉ xuất hiện một lần.
.box {
background-image: url("pattern.png"), url("logo.png");
background-repeat: repeat, no-repeat;
}
Trong ví dụ trên, pattern.png được lặp trên vùng nền, còn logo.png chỉ hiển thị một lần. Cách viết này phù hợp với các giao diện cần kết hợp họa tiết nền và một hình ảnh trang trí cố định.
Kết hợp repeat, no-repeat, repeat-x và repeat-y
Các kiểu lặp có thể được phối hợp tùy theo mục đích của từng lớp nền. Chẳng hạn, một hình có thể lặp theo chiều ngang để tạo dải trang trí, hình khác lặp theo chiều dọc làm họa tiết cạnh bên, trong khi hình chính không lặp.
.banner {
background-image: url("line.png"), url("texture.png"), url("icon.png");
background-repeat: repeat-x, repeat-y, no-repeat;
}
Thứ tự giá trị rất quan trọng: giá trị đầu tiên áp dụng cho hình nền đầu tiên, giá trị tiếp theo áp dụng cho hình thứ hai và tiếp tục tương tự. Khi số lượng hình nền và giá trị lặp không tương ứng, việc hiển thị có thể không giống với ý định ban đầu.
Ứng dụng nhiều hình nền để tạo giao diện CSS
Kết hợp nhiều hình nền giúp giảm nhu cầu tạo thêm phần tử HTML chỉ để trang trí. Một lớp có thể tạo họa tiết, lớp khác làm đường viền hoặc điểm nhấn, còn hình nền cuối cùng đảm nhiệm phần hình ảnh chính.
Đặc biệt, cách này hữu ích khi xây dựng các thành phần như banner, nút, tiêu đề hoặc khu vực trang trí cần nhiều lớp nền nhưng vẫn muốn giữ cấu trúc HTML gọn. Việc phân chia rõ vai trò của từng hình nền và thiết lập kiểu lặp tương ứng sẽ giúp CSS dễ kiểm soát hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính background-repeat trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
