Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Which property is used in CSS to control the repetition of an image in the background?
To control the repetition of an image in the background, use the background-repeat property. You can use no-repeat value for the background-repeat property if you do not want to repeat an image, in this case, the image will display only once.
Syntax
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round;
Common Values
| Value | Description |
|---|---|
repeat |
Repeats both horizontally and vertically (default) |
repeat-x |
Repeats horizontally only |
repeat-y |
Repeats vertically only |
no-repeat |
Displays image only once |
Example: Basic Background Repeat
You can try to run the following code to learn how to work with the background-repeat property:
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
height: 300px;
padding: 20px;
}
</style>
</head>
<body>
<p>Tutorials Point - Background repeats in all directions</p>
</body>
</html>
Example: No Repeat
<html>
<head>
<style>
.no-repeat {
background-image: url("/css/images/css.jpg");
background-repeat: no-repeat;
background-position: center;
height: 200px;
border: 1px solid #ccc;
padding: 20px;
}
</style>
</head>
<body>
<div class="no-repeat">
<p>Image appears only once</p>
</div>
</body>
</html>
Example: Horizontal and Vertical Repeat
<html>
<head>
<style>
.repeat-x {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
height: 100px;
margin: 10px;
border: 1px solid #ddd;
}
.repeat-y {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
height: 200px;
width: 100px;
margin: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="repeat-x">Horizontal repeat</div>
<div class="repeat-y">Vertical repeat</div>
</body>
</html>
Conclusion
The background-repeat property provides precise control over background image repetition. Use no-repeat for single display, repeat-x or repeat-y for directional repetition, and repeat for full tiling.
Updated on: 2026-03-15T23:18:59+05:30
2K+ Views
Advertisements