X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS background-repeat Property

The background-repeat property defines how the background image should be repeated. By its default value the background-repeat is repeated both horizontally and vertically. If the "repeat-x" value is set, the image will be repeated only horizontally. If the "repeat-y" value is set, the image will be repeated only vertically. There are two other values: "space" and "round". "Space" makes the image be repeated without clipping and "round" makes the image be repeated without gaps.

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

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

Initial Value repeat
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited No.
Animatable No.
Version CSS1
DOM Syntax object.style.backgroundRepeat = "repeat-x";

Syntax

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

Example

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

In the following example the background-image is not repeated.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.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>

Another example where "repeat-x" value is applied. It makes the background-image be repeated only horizontally.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.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>

Now let’s try an example with the "repeat-y" value. It makes the image to be repeated only vertically.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.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>

Let’s try an example where the "space" value is applied. Here the background-image is repeated without clipping.

Example

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

Another example with the "round" value. It makes the background-image be repeated without gaps.

Example

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

Values

Value Description
repeat The background image is repeated both horizontally and vertically. This is the default value.
repeat-x The background image is repeated only horizontally.
repeat-y The background image is repeated only vertically.
no-repeat The background image in not repeated.
space The background image is repeated as much as possible without clipping.
round The background image is repeated without gaps.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

The background-repeat property needs to be used with the



Do you find this helpful?

Related articles