Definition:
CSS background-repeat property sets how background images are repeated. By default, a background image is repeated both horizontally and vertically. But this background repeated image can be controlled by using background-repeated property values and displays as you want.
Property Values are:
background-repeat:
repeat
repeat-x
repeat-y
no-repeat
space
round
initial
inherit
Syntax:
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;
background-repeat: initial;
background-repeat: inherit;
Let use the following image to set as a background-repeat with above each property values with example.
Lets have a look in detail by applying each background-repeat property values.
Here is an image that I am going to use for each background-repeat values listed above.

1) background-repeat: repeat;
Defination:
background-repeat: repeat is a default property value that repeated a background image both horizontally and vertically.
Syntax:
background-repeat: repeat;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: repeat;
}
.text{
padding-top: 100px;
}
</style>
</head>
<body>
<div id="background-repeat">
<h3>background-repeat: repeat;</h3>
<p class="text"> Here is an example of image with background-repeat's property value is repeat.</p>
</div>
</body>
</html>
Output:

2. background-repeat: repeat-x;
Definition:
Repeat-x sets the background image repeated horizontally only.
Syntax:
background-repeat: repeat-x;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat-x{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: repeat-x;
}
.text{
padding-top: 100px;
}
</style>
</head>
<body>
<div id="background-repeat-x">
<h3>background-repeat: repeat-x;</h3>
<p class="text"> Here is an example of image with background-repeat's property value is repeat-x.</p>
</div>
</body>
</html>
Output:

3. background-repeat: repeat-y;
Definition:
Repeat-y sets the background image repeated vertically only.
Syntax:
background-repeat: repeat-y;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat-y{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: repeat-y;
}
.text{
padding-top: 100px;
}
</style>
</head>
<body>
<div id="background-repeat-y">
<h3>background-repeat: repeat-y;</h3>
<p class="text"> Here is an example of image with background-repeat's property value is repeat-y.</p>
</div>
</body>
</html>
Output:

4. background-repeat: no-repeat;
Definition:
no-repeat property shows the background-image property value only once and it doesn’t repeat the background image.
See below with examples.
Syntax:
background-repeat: no-repeat;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-no-repeat{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: no-repeat;
}
.text{
padding-top: 20px;
}
</style>
</head>
<body>
<div id="background-no-repeat">
<h3>background-repeat: no-repeat;</h3>
<p class="text"> Here is an example of image with background-repeat's property value is no-repeat.</p>
</div>
</body>
</html>
Output:

5. background-repeat: space;
Definition:
The background image is repeated as much as possible with an evenly distributed blank space between images.
Syntax:
background-repeat: space;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: space;
}
.text{
padding-top: 20px;
}
</style>
</head>
<body>
<div id="background-repeat">
<h3>background-repeat: space;</h3>
<p class="text"> Here is an example of image with background-repeat's property value is space.</p>
</div>
</body>
</html>
Output:

6. background-repeat: round;
Definition:
The background image is repeated without having space.
Syntax:
background-repeat: round;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: round;
}
.text{
padding-top: 20px;
}
</style>
</head>
<body>
<div id="background-repeat">
<h3>background-repeat: round;</h3>
<p class="text"> Here is an example of image with background-repeat's property value is round.</p>
</div>
</body>
</html>
Output:

7. background-repeat: initial;
Definition:
Initial value sets the background-repeat into default value.
Syntax:
background-repeat: initial;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: initial;
}
.text{
padding-top: 20px;
}
</style>
</head>
<body>
<div id="background-repeat">
<h3>background-repeat: initial;</h3>
<p class="text"> Here is an example of image with background-repeat's property value is initial.</p>
</div>
</body>
</html>
Output:

8. background-repeat: inherit;
Definition:
inherit property inherit the background image from its parent elements.
Syntax:
background-repeat: inherit;
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-origin: padding-box;
background-repeat: inherit;
}
.text{
padding-top: 20px;
}
</style>
</head>
<body>
<div id="background-repeat">
<h3>background-repeat: inherit;</h3>
<p class="text"> Here is an example of image with background-repeat's property value is inherit.</p>
</div>
</body>
</html>
Output:

Donate to support writers.
You may be interested in the following topics:
- CSS background-size
- CSS background-repeat-y
- CSS background-repeat-x
- CSS background-repeat
- CSS background-position-y
- CSS background-position-x
- CSS background-position
- CSS background-origin
- CSS background-image
- CSS background-color
- CSS background-clip
- CSS background-blend-mode
- CSS background-attachment
- CSS Background (All Properties)