The background-repeat property

The background-repeat property specifies how to repeat a background image of an element. By default, the image is repeated along both the X and Y axis, thus covering the entire available area.

Syntax

cssselector {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Values

Value	Description
`no-repeat`	An image will not be repeated at all.
`repeat-x`	An image will be repeated along the X axis.
`repeat-y`	An image will be repeated along the Y axis.
`repeat`	An image will be repeated along the X axis and Y axis.
`space`	An image will be repeated so many times to completely fill an area; if this fails, empty space is added between the images.
`round`	An image will be repeated so that an area fits an integer number of images; if this cannot be done, then the background images will be scaled.

Default value: repeat - covers the entire screen with a pattern.

Example

By default, the background image will cover the entire element:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Example

Let's make sure the image doesn't repeat itself:

html<div id="elem"></div>

css#elem {
  background-repeat: no-repeat;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Example

Now let the image repeat along the X axis:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-x;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Example

And now along the Y axis:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Example

Images that repeat along the axes can be positioned using the background-position property:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-position: top center;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Example

Let's see how the space value works:

html<div id="elem"></div>

css#elem {
  background-repeat: space;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Example

Let's see how the round value works:

html<div id="elem"></div>

css#elem {
  background-repeat: round;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

The background-repeat property

Syntax

Values

Example

Example

Example

Example

Example

Example

Example

See also