We can perform the following functionalities using the background-repeat property:
- no-repeat avoids the repetition of the image.
- repeat-x repeats an image in a horizontal direction.
- repeat-y repeats an image in a vertical direction.
- space repeats the image without clipping and added space between each repetition
- round repeats and stretches the image without adding any space
This article will discuss all the above-mentioned background-property values with examples.
Example
Let’s begin with the default background-image property.
body{
background-image: url("cover.jpg");
}
</style>
The above snippet will provide the following output:
So, by default, the background image property repeated the image horizontally as well as vertically.
no-repeat value
Let’s see what will happen when a value “no-repeat” will be assigned to the background repeat property:
body{
background-image: url("cover.jpg");
background-repeat: no-repeat;
}
</style>
Now the background image will appears only once. This example provides the following output:
repeat-x value
Now let’s assign “repeat-x” to the background-repeat property and note how it works:
body{
background-image: url("cover.jpg");
background-repeat: repeat-x;
}
</style>
Let’s observe the impact of “repeat-x” on background image in the following output:
From the above output it is clear that “repeat-x” repeats the image horizontally only.
repeat-y value
Similarly, let’s assign the repeat-y value to the background-repeat property:
body{
background-image: url("cover.jpg");
background-repeat: repeat-y;
}
</style>
The above given piece of code will produce the following output:
The output verifies that repeat-y repeated the image vertically only.
space value
Let’s utilize the “space” value for the background-repeat property to add the even spaces between the images:
body{
background-image: url("cover.jpg");
background-repeat: space;
}
</style>
The above script will provide the following output:
round value
Assigning the “round” value to the background-repeat property will fit the image according to the screen size:
body{
background-image: url("cover.jpg");
background-repeat: round;
}
</style>
As a result we will get the following output:
Multiple background image repeat
In CSS multiple background images can be added to an element and the below given example will elaborate how to control the repetition behavior of multiple images using background-repeat property:
body{
background-image: url("cover.jpg"), url("cover1.jpg");
background-repeat: repeat-y, repeat-x;
}
</style>
In the above code, the background-image property takes two URLs to add two background images. In the next line the background-repeat property also specifies two values i.e. repeat-y, repeat-x. repeat-y will repeat the first image vertically while repeat-x will repeat the second image horizontally:
Conclusion
The background-repeat property controls the repetition behavior of the background image. It determines whether a background image will repeat or not if yes then how, i.e. vertically or horizontally.
This write-up provided a thorough overview of background-repeat property in CSS. Firstly it determines what are the values that can be assigned to the background-repeat property. Afterward, it explained the working of each background-repeat value in detail along with the examples.
