In this article, we will see how an image repetition of the backup is controlled in CSS. This task can be achieved by using the background-repeat property that will help us to control the repetition of the image.
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|repeat-y|no-repeat|initial|inherit;
Example 1: In the example, we will make use of the repeat-x to repeat the image in the horizontal direction.
HTML
<!DOCTYPE html><html>
<head>
<title>background-repeat property</title>
<style>
body {
margin-top: 40px;
background-image: url(
background-repeat: repeat-x;
background-size: 150px 100px;
}
h1 {
text-align: center
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
|
Output:
Example 2: In the example, we will make use of the repeat-y to repeat the image in the vertical direction.
HTML
<!DOCTYPE html><html>
<head>
<title>background-repeat property</title>
<style>
body {
margin-top: 40px;
background-image: url(
background-repeat: repeat-y;
background-size: 150px 100px;
}
h1 {
margin-top: 210px;
vertical-align: middle;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
|
Output: