CSS Background Repeat

Well, by default, the added background image is going to be repeated both horizontally and vertically, if it does not cover the entire element. But we have control over that thing too. If you wish to change this, you can use the background-repeat property to do so.

Simply speaking, you can have control over the repeating behavior of the element, like we can make the image repeat in the x-direction, or the y-direction, or not repeat at all.

Well, let’s have an example over here, to understand the concept in a better way.

Let’s say that we are having an image in the background for the body from the above example.

So, if we try to open the file in the browser, the output comes out to be something like this –

Notice that the image is repeating in the above program since it is not fitting to the size of the element(body in this case), But we have control over that too. Let’s see how can we control it.
Now, the background image is repeated both vertically and horizontally. But how about just making it repeat either horizontally or vertically? We are going to use the background-repeat property, which has got several values like repeat-x, repeat-y, or no-repeat, repeat, etc.

You can try the below code, which shows how you can repeat the image in either a vertical or horizontal direction –

So, now, our background image is repeating, but this time, it is repeating horizontally. If we try to open the webpage in the browser, the output is something like this –

So, as you can see that the background image is now horizontally repeating. You can also try putting on the value as repeat-y for the background-repeat property in the same above example. You can observe there, that the image will be repeating vertically now.

Also, if you decide that the image should not be repeated at all, you can use the value no-repeat, for the property background-repeat. Have a look at the below program, where, the image is not at all being repeated.

If you write the above code and open it in the browser, you will observe that the background image is not repeated at all now.

Have a look at the output –

So, you can comfortably see, that the image is not repeating at all. So, when you are adding some background image to the element, and you want to have control over its repeating behavior, you can use the background-repeat property, which has got some values, which can help us have some control over the repeating behavior of the image.