In this section, we will learn what the background-repeat property is and how to use it in CSS.

Click here to run the example of background-repeat property.

CSS background-repeat Property Definition and Usage

When we set an image for the background of an element, browsers by default, repeat (tile) that image until the background is filled with that image.

But CSS provides a property named `background-repeat` by which we can control the repetition of a background image.

CSS background-repeat Property Syntax

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

CSS background-repeat Property Value

The values for this property are:

• repeat: Using this value, the background image will be repeated in both horizontal and vertical directions until the entire background is filled with that image. (This is the default behavior)
• no-repeat: Using this value, the image will not be repeated no matter if that image fills the background or not.
• repeat-y: Using this value, the target image will be repeated only vertically.
• repeat-x: Using this value, the target image will be repeated only horizontally.
• round: this value acts the same as “repeat” but it won’t allow the background image to be clipped at the edges. Browsers might scale the image to make this happen and as a result, the aspect of the image won’t be preserved.
• space: This value acts the same as “repeat” and just like “round” value, it won’t allow the background image to be clipped at the edges. But using this value, the aspect ratio of the image will not be distorted, instead browsers use space between each tile to fill the entire background with the image.

Example: background image no-repeat

See the Pen background image no-repeat by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS background-repeat Property Work?

As you can see from the example above, we’ve used the background-repeat property with the specified values to define how a background image should be displayed for an element.

For example, for the <div> element with the class “six”, the value is set to no-repeat and that means the image should not be repeated. Hence, you only saw the image once on the top left corner of the element.

Example: repeat background CSS

See the Pen repeat background CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.