CSS background-repeat

The background-repeat property in CSS defines how a background image will be repeated within the element's background. By default, background images will repeat both vertically and horizontally to fill the entire element. However, this behavior can be changed using different values of the background-repeat property.

The background-repeat property can take the following values:

repeat: The background image will be repeated both vertically and horizontally. This is the default value.
repeat-x: The background image will be repeated only horizontally.
repeat-y: The background image will be repeated only vertically.
no-repeat: The background image will not be repeated.

Let's take a look at some examples to better understand how the background-repeat property works:


    .example div{
      width: 200px;
      height: 200px;
      background-image: url('example.jpg');
      border:1px solid #ccc;
	  margin:10px; float:left
    }
    
    .example .repeat {
      background-repeat: repeat;
    }
    
    .example .repeat-x {
      background-repeat: repeat-x;
    }
    
    .example .repeat-y {
      background-repeat: repeat-y;
    }
    
    .example .no-repeat {
      background-repeat: no-repeat;
    }

  <div class="repeat"></div>
    <div class="repeat-x"></div>
    <div class="repeat-y"></div>
    <div class="no-repeat"></div>

Result:

In the example above, we have four different div elements with different background-repeat values applied to them. The first one has repeat, the second one has repeat-x, the third one has repeat-y, and the last one has no-repeat.

You can see how the background image is repeated or not repeated based on the value of the background-repeat property.