CSS background-repeat

The CSS background-repeat property is used to define whether the background-image should be repeated or not. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd{border: 3px solid chocolate;
         padding: 22px;
         background-image: url("images/usml-plnt-lf.jpg");
         background-repeat: no-repeat;}
   </style>
</head>
<body>
   
   <div id="myd">
      <h2>The background-repeat Property</h2>
      <p>This is an example of background-repeat property.</p>
   </div>
   
</body>
</html>

Output

The background-repeat Property

This is an example of background-repeat property.

By default - The background-image is repeated vertically and horizontally.

CSS background-repeat Syntax

The syntax of background-repeat property in CSS, is:

background-repeat: x;

The value of x should be any of the following:

repeat - used to repeat the background image in both direction, that is x (horizontal) and y (vertical). This is the default value
repeat-x - used to repeat the background image only in x (horizontal) direction
repeat-y - used to repeat the background image only in y (vertical) direction
no-repeat - used when we do not want to repeat the background image
space - used when we need to put equal whitespaces in between the repeated images to fill the entire area of the element
round - used when we need to repeat and stretch the image to fill the entire area of the element
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS background-repeat Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f, #g{border: 3px solid chocolate;
         height: 280px; margin-bottom: 20px; padding: 22px;
         background-image: url("images/usml-plnt-lf.jpg");}
      #b{background-repeat: repeat;}
      #c{background-repeat: repeat-x;}
      #d{background-repeat: repeat-y;}
      #e{background-repeat: space;}
      #f{background-repeat: round;}
      #g{background-repeat: no-repeat;}
   </style>
</head>
<body>
   
   <h3>Without background-repeat</h3>
   <div id="a"></div>

   <h3>background-repeat: repeat</h3>
   <div id="b"></div>

   <h3>background-repeat: repeat-x</h3>
   <div id="c"></div>

   <h3>background-repeat: repeat-y</h3>
   <div id="d"></div>

   <h3>background-repeat: space</h3>
   <div id="e"></div>

   <h3>background-repeat: round</h3>
   <div id="f"></div>

   <h3>background-repeat: no-repeat</h3>
   <div id="g"></div>
   
</body>
</html>