Thuộc tính background-repeat trong CSS

Bùi Tấn Lực
833
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>

Chạy Thử

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>

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:

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>

Chạy Thử

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>

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:

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>

Chạy Thử

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>

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.

★★★★★ ★★★★★
5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ

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 *

Bình luận, Hỏi đáp

Đăng ký tư vấn thiết kế website

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