Tidadigi Logo

CSS background-repeat Property

Thuộc tính background-repeat trong CSS được dùng để lặp lại ảnh nền theo chiều ngang và dọc. Nó cũng quyết định ảnh nền có được lặp lại hay không.

Cú pháp:

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

Giá trị mặc định: Giá trị mặc định của thuộc tính này là initial.

Các giá trị thuộc tính:

  • repeat: Thuộc tính này được sử dụng để lặp lại ảnh nền theo cả chiều ngang và chiều dọc. Ảnh cuối cùng sẽ bị cắt nếu không vừa với cửa sổ trình duyệt.
  • repeat-x: Thuộc tính này được dùng để lặp lại ảnh nền theo chiều ngang.
  • repeat-y: Thuộc tính này được dùng để đặt ảnh nền lặp lại theo chiều dọc.
  • no-repeat: Thuộc tính này không lặp lại ảnh nền. Nó chỉ hiển thị ảnh nền một lần duy nhất.

Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính background-repeat: repeat;.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>background-repeat property</title>
    <style>
        body {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-repeat: repeat;
            background-size: 200px 150px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>background-repeat: repeat;</h2>
</body>
  
</html>

Đầu ra:

css-background-repeat-property

Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính background-repeat: repeat-x;.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>background-repeat property</title>
    <style>
        body {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-repeat: repeat-x;
            background-size: 200px 150px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>background-repeat: repeat-x;</h2>
</body>
  
</html>

Đầu ra:

css-background-repeat-property

Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính background-repeat: repeat-y;.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>background-repeat property</title>
    <style>
        body {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-repeat: repeat-y;
            background-size: 200px 150px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>background-repeat: repeat-y;</h2>
</body>
  
</html>

Đầu ra:

css-background-repeat-property

Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính background-image: no-repeat;.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>background-repeat property</title>
    <style>
        body {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
            background-repeat: no-repeat;
            background-size: 400px 250px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>background-repeat: no-repeat;</h2>
</body>
  
</html>

Đầu ra:

css-background-repeat-property

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi background-repeat property được liệt kê dưới đây:

  • Google Chrome 1.0 trở lên
  • Edge 12.0 trở lên
  • Firefox 1.0 trở lên
  • Opera 3.5 trở lên
  • Apple Safari 1.0 trở lên

Last Updated : 21/07/2025