Background-repeat

As you remember when we set some image as a background, by default it's repeated horizontally and vertically.

The image which we set as a background, can be repeated just horizontally (repeat-x) or just vertically (repeat-y) or can be used just one time(no-repeat).

We need to use the background-repeat property with the background-position property.

By default, the image will be displayed in the top left corner without background-position property.

CSS Syntax

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

Let's see an example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/c5315fa7c9158b3bc39ef996906bae4497745338.jpeg");
      }
    </style>
  </head>
  <body>
    <h2>This is some heading for an example.</h2>
    <p>Some paragraph for an example.</p>
  </body>
</html>

Here is the result:

As you can see in the result, our image, which we set as background is repeated horizontally and vertically. It's a default value of background-repeat property.

Now let's see an example when we use the "no-repeat" value.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/c5315fa7c9158b3bc39ef996906bae4497745338.jpeg");
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>This is some heading for an example.</h2>
    <p>Some paragraph as for an example.</p>
  </body>
</html>

Here is the result:

As you can see in result our image, which we set as background is not repeated, because we use the "no-repeat" value. The image is displayed in the top left corner, because we haven't used the background-position property.

Now let's see an example, when we use the "repeat-x" value.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/c5315fa7c9158b3bc39ef996906bae4497745338.jpeg");
        background-repeat: repeat-x;
      }
    </style>
  </head>
  <body>
    <h2>This is some heading for an example.</h2>
    <p>Some paragraph for an example.</p>
  </body>
</html>

Here is the result:

As you can see in the result, our image which we set as background is repeated just horizontally, because we have used the "repeat-x" value.

Now let's see an example, when we use the "repeat-y" value.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/c5315fa7c9158b3bc39ef996906bae4497745338.jpeg");
        background-repeat: repeat-y;
      }
    </style>
  </head>
  <body>
    <h2>This is some heading for an example.</h2>
    <p>Some paragraph for an example.</p>
  </body>
</html>

Here is the result:

As you can see in the result, our image, which we set as background is repeated just vertically, because we have used the "repeat-y" value.

Now let's see an example, when we use the "repeat-y" value.

Property Values

Value Description
repeat It means background-image is repeated both vertically and horizontally.
repeat-x It means background-image is repeated just horizontally.
repeat-y It means background-image is repeated just vertically.
no-repeat It means background-image is not repeted.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.