CSS background-repeat Property

Last Updated : 02 Aug, 2023

The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will be repeated or not.

Syntax:

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

Default Value: Its default value is initial.

Property Values:

repeat: This property is used to repeat the background image both horizontally and vertically. The last image will be clipped if it is not fit in the browser window.
repeat-x: This property is used to repeat the background image horizontally.
repeat-y: This property is used to set the background image repeated only vertically.
no-repeat: This property does not repeat the background image. It displays the background image only once.

Example: In this example, we are using the background-repeat: repeat; property.

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>

Output:

Example: In this example, we are using the background-repeat: repeat-x; property.

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>

Output:

Example: In this example, we are using the background-repeat: repeat-y; property.

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>

Output:

Example: In this example, we are using the background-image: no-repeat; property.

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>