CSS background-repeat Property

CSS background-repeat property defines weather background images are repeated or tiled.

The background image is possible to repeat along with the horizontal axis, vertical axis, both axes, or not repeated at all.

Usages

The following table outline the usages and version history of this property.

Default value: repeat
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.backgroundRepeat = "repeat"

Syntax

Here is a syntax for the CSS background-repeat property

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

Property Values

The following table describes the values of this property.

Value Description
repeat Default. Specifies that background image is repeated both vertically and horizontally
repeat-x Specifies that background image is repeated horizontally only
repeat-y Specifies that background image is repeated vertically only
no-repeat Specifies that background image is not repeated
space Specifies that background image is repeated as much as possible without clipping. Also added whitespace between the images.
round Specifies that background image is repeated and stretched to fill the space.
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets background image repeat, repeat-x, repeat-y, no-repeat, space, round.

.repeat {
  background-repeat: repeat;
}
.repeatx {
  background-repeat: repeat-x;
}
.repeaty {
  background-repeat: repeat-y;
}
.norepeat {
  background-repeat: norepeat;
}
.space {
  background-repeat: space;
}
.round {
  background-repeat: round;
}

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.