B.8. background-repeat

By default, a background image, specified with the background-image property, will repeat horizontally and vertically to fill the element (this is often referred to as tiling). The background-repeat property lets you override that behavior with your own preferences.

Inherited: No

See also: Section B.5background-image, Section B.6background-position

B.8.1. Value

repeat, no-repeat, repeat-x, or repeat-y

The first two options are self-explanatory. repeat-x causes the image to repeat only horizontally, effectively forming a horizontal band with the background image. repeat-y causes the image to repeat only vertically, forming a vertical band.

Initial value: repeat

B.8.2. Compatibility

CSS Version: 1

Works in all CSS-compatible browsers, including Internet Explorer 4 or later and Netscape 4 or later.

Internet Explorer 4 for Windows, however, only tiles images down and to the right (not up or to the left), so if you specify a background-position other than the default, you may get incomplete tiling in that browser.

B.8.3. Example

This style rule uses background-repeat and background-position to create a horizontal band 50 pixels down from the top of the page. We keep the left edge of the background image flush against the left margin to avoid the bug in Internet Explorer 4 for Windows.

body {
  background-repeat: repeat-x;
  background-position: 0 50px;
}