CSS background-repeat Property
In CSS, The background-repeat property allows you to repeat the background image vertically and horizontally both on the web page. The background-repeat property can decide whether the background image will repeat horizontally, vertically, or not repeat.
Syntax:
background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit;
Property Values:
The CSS background-repeat have many property for set image repeat position.
- background-repeat: repeat - The CSS repeat property is used for repeat background image vertically and horizontally in container.
- background-repeat: repeat-x - The CSS repeat-x property is used for repeat background image only horizontally in container.
- background-repeat: repeat-y - The CSS repeat-y property is used for repeat background image only vertically in container.
- background-repeat: no-repeat - The CSS no-repeat property does not repeat background image. The image will show in container once.
Examples:
In this example, The CSS background-repeat: repeat property repeat background image vertically and horizontally both.
<!DOCTYPE html>
<html>
<head>
<title>background-repeat property</title>
<style>
body {
background-image: url("https://www.webrecto.com/css/images/webrecto.jpg");
background-repeat: repeat;
background-size: 200px 140px;
text-align: center;
}
</style>
</head>
<body>
<h2>background-repeat: repeat;</h2>
</body>
</html>
In this example, The CSS background-repeat: repeat-x property repeat background image horizontally in container.
<!DOCTYPE html>
<html>
<head>
<title>background-repeat property</title>
<style>
body {
background-image: url("https://www.webrecto.com/css/images/webrecto.jpg");
background-repeat: repeat-x;
background-size: 200px 140px;
text-align: center;
}
</style>
</head>
<body>
<h2>background-repeat: repeat-x;</h2>
</body>
</html>
In this example, The CSS background-repeat: repeat-y property repeat background image vertically in container.
<!DOCTYPE html>
<html>
<head>
<title>background-repeat property</title>
<style>
body {
background-image: url("https://www.webrecto.com/css/images/webrecto.jpg");
background-repeat: repeat-y;
background-size: 200px 140px;
text-align: center;
}
</style>
</head>
<body>
<h2>background-repeat: repeat-y;</h2>
</body>
</html>
In this example, The CSS background-repeat: no-repeat property does not repeat background image in container. It will display only once.
<!DOCTYPE html>
<html>
<head>
<title>background-repeat property</title>
<style>
body {
background-image: url("https://www.webrecto.com/css/images/webrecto.jpg");
background-repeat: no-repeat;
background-size: 200px 140px;
text-align: center;
}
</style>
</head>
<body>
<h2>background-repeat: no-repeat;</h2>
</body>
</html>