background-repeat

The background-repeat property manages the repetition of a background image. By default, the value of this property is repeat, meaning the background image will repeat both vertically and horizontally.

        
          
          <div class="element"></div>
          <div class="element"></div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          .element {  height: 100vh;  background-image: url(images/pattern.png);  background-size: 64px auto;}
          .element {
  height: 100vh;
  background-image: url(images/pattern.png);
  background-size: 64px auto;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

A beautiful pattern has been created. The image repeats both horizontally and vertically.

Let's change the value to repeat-x:

        
          
          .element {  background-repeat: repeat-x;}
          .element {
  background-repeat: repeat-x;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Now the image repeats only horizontally. Similarly, you can repeat the image vertically using the repeat-y value.

But more often in practice, the no-repeat value is encountered. With this value, the background image will not repeat either horizontally or vertically.

The following keywords are used as values for the background-repeat property:

• no-repeat — the background image does not repeat, leaving only one inside the element.
• repeat — the image repeats both horizontally and vertically until it fills the entire area of the element (default value).
• repeat-x — the background repeats horizontally.
• repeat-y — the background repeats vertically.
• space — the image repeats until it fills the entire element. However, if it is not possible to repeat the image without cropping, equal space is added between the images. Rarely needed in practice.
• round — the image repeats so that it fills the entire element. But the picture is not cropped, repeating a whole number of times. If this is not possible, the image is scaled. Rarely needed in practice.

The keywords repeat and no-repeat can be combined to control repetitions horizontally (first value) and vertically (second value). However, it is easier to use the special keywords repeat-x and repeat-y.

💡 The property does not inherit.

💡 The default value is repeat.

💡 Most often for fullscreen backgrounds, the value no-repeat is specified.

💡 The background-repeat property cannot be animated 😒

        
          
          <div class="element"></div>
          <div class="element"></div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          .element {  height: 100vh;  background-image: linear-gradient(    #49a16c 50px,    #064236 0  );  background-size: 100% 100px;  background-repeat: repeat-y;}
          .element {
  height: 100vh;
  background-image: linear-gradient(
    #49a16c 50px,
    #064236 0
  );
  background-size: 100% 100px;
  background-repeat: repeat-y;
}

        
        
          
            
            Copy
            Copied
            Failed to copy