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.
<!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.
<!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.
<!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.
<!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>
Output:
Supported Browsers: The browsers supported by background-repeat property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Apple Safari 1.0 and above