The background-repeat CSS property is used to set how the background images are repeated.
Syntax
background-repeat:repeat|repeat-x|repeat-y|space|round|no-repeat;
Values
| Value | Description |
| repeat | The background image is repeated horizontally and vertically. The last image will be clipped if it doesn't fit. |
| repeat-x | The background image repeated horizontally (x axis). |
| repeat-y | The background image repeated vertically (y-axis). |
| no-repeat | The image is not repeated. |
| space | The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and white-spaceis distributed evenly between the images. |
| round | As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room (space left >= half of the image width) for another one to be added. |
| inherit | The property is inherited from the parent element. |
Example – repeat
<!DOCTYPE html>
<html>
<head>
<title>CSS background size</title>
<style>
body{
background-image: url('logo.png');
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>Output
Example - repeat-x
<style>
body{
background-image: url('logo.png');
background-repeat: repeat-x;
}
</style>Output
Example - repeat-y
<style>
body{
background-image: url('logo.png');
background-repeat: repeat-y;
}
</style>Output
Example - no-repeat
<style>
body{
background-image: url('logo.png');
background-repeat: no-repeat;
}
</style>Output
Example - space
<style>
body{
background-image: url('logo.png');
background-repeat: round;
}
</style>Output
Learn about the shorthand CSS background property.
