CSS background-repeat Property
CSS background-repeat property is used to repeat background images for the specified number of times. The background image may be repeated along the horizontal as well as the vertical axes or not being repeated at all. Let's see its syntax first.
Syntax for background-repeat Property
Following is the syntax for the background-repeat property.
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
CSS background-repeat property values
Let's see what values this property can have and what do these values do:
|
Value
|
Description
|
| repeat |
In this case, the image gets repeated as much as required to cover the whole background image painting area. The last image gets clipped if it does not get fit. |
| space |
In this case, the image gets repeated as much as possible without clipping. Both the first and last images get pinned to any one side of the element and the whitespace is distributed evenly between images. And the background-position property gets ignored unless and until only one image could be displayed without any clipping. |
| round |
The moment allowed space increases in size, repeated images get stretched with no gaps, unless there is a space (half of the width of the image) left for another one to be added. When the next image gets added, all of the images get compressed to allow room space. |
| no-repeat |
In this case, an image is not repeated and as a result, the background image painting area dos not get fully covered. So, the position of this non-repeated background image is determined by the background-position property of CSS. |
Example: CSS background-repeat Property
In the example below, we are using the background-repeat property with different background positions, borders, and their different values. In this case, we have given several background-repeat values for different objects as repeat-x, repeat-y, repeat, space, round and no-repeat.
<!DOCTYPE html>
<head>
<title>Background-repeat property in CSS</title>
<style type="text/css">
ol,
li {
margin: 0;
padding: 0;
}
li {
margin-bottom: 12px;
}
div {
background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
width: 160px;
height: 70px;
}
.one {
background-repeat: no-repeat;
}
.two {
background-repeat: repeat;
}
.three {
background-repeat: repeat-x;
}
.four {
background-repeat: repeat-y;
}
.five {
background-repeat: space;
}
.six {
background-repeat: round;
}
.seven {
background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
background-repeat: repeat-x,
repeat-y;
height: 144px;
}
</style>
</head>
<body>
<ol>
<li>no-repeat
<div class="one"></div>
</li>
<li>repeat
<div class="two"></div>
</li>
<li>repeat-x
<div class="three"></div>
</li>
<li>repeat-y
<div class="four"></div>
</li>
<li>space
<div class="five"></div>
</li>
<li>round
<div class="six"></div>
</li>
<li>repeat-x, repeat-y (multiple images)
<div class="seven"></div>
</li>
</ol>
</body>
</html>
Output:
Example 2: CSS background-repeat Property
In the example below, we are using the background-repeat properties with different background positions, borders, and their different values.
In this case, we have given the background-repeat value as repeat-x i.e; the keyword value.
<!DOCTYPE html>
<head>
<title>Background-repeat property in CSS</title>
<style type="text/css">
body{
background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
background-repeat: repeat-x;
}
</style>
</head>
<body></body>
</html>
Output:
Example: CSS background-repeat Property with the space value
Here, in the example below, we are using the background-repeat properties with different background positions, borders, and their different values. In this case, we have given the background-repeat value as space i.e; the keyword value.
<!DOCTYPE html>
<head>
<title>Background-repeat property in CSS</title>
<style type="text/css">
body{
background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
background-repeat: space;
}
</style>
</head>
<body></body>
</html>
Output:
Conclusion
The initial value for the background-repeat property is repeat. The property is applicable to all elements. It is also applicable to ::first-letter and ::first-line. It is not an inherited property. The computed value for this property is a list where every item consists of two keywords, one per dimension.
