Thuộc tính background-repeat trong CSS

• Bùi Tấn Lực
• 27
• 04/10/2025

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, chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính background-repeat trong CSS

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:

body {
  background-image: url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-repeat: repeat-y;	
}

Chạy Thử

Thuộc tính background-repeat repeat-x trong CSS

Background lặp theo chiều ngang:

body {
  background-image: url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-repeat: repeat-x;	
}

Chạy Thử

Thuộc tính background-repeat repeat trong CSS

Background lặp theo chiều dọc lẫn chiều ngang:

body {
  background-image: url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-repeat: repeat;	
}

Chạy Thử

Thuộc tính background-repeat no-repeat trong CSS

Background không có lặp lại:

body {
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png");
  background-repeat: no-repeat;	
}

Chạy Thử

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:

body  {
  background-image: url("https://webmoi.vn/thumuc/bg-cay.png"), url("https://webmoi.vn/thumuc/bg-nho.jpg");
  background-repeat: no-repeat, repeat;
  background-color: #cccccc;
  color:yellow
}

Chạy Thử

Thuộc tính background-repeat vuông, tròn trong CSS

#example2 {
  border: 2px solid black;
  padding: 25px;
  background: url("https://webmoi.vn/thumuc/bg-vuong.jpg");
  background-repeat: space;
}

#example3 {
  border: 1px solid black;
  padding: 25px;
  background: url("https://webmoi.vn/thumuc/bg-vuong.jpg");
  background-repeat: round;
}

Chạy Thử

Thuộc tính background-repeat canh giữa, full hình trong CSS

Căn giữa hình ảnh, thay đổi kích thước hình ảnh nền để bao phủ toàn bộ vùng chứa:

.hero-image {
  background-image: url("https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg");
  background-color: #cccccc;
  height: 500px;
  background-position: center; /*Căn giữa hình ảnh*/
  background-repeat: no-repeat;
  background-size: cover; /* Thay đổi kích thước hình ảnh nền để bao phủ toàn bộ vùng chứa */
  position: relative;
}

Chạy Thử

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.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thuộc tính background-repeat trong CSS
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 *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn