CSS Background Repeat

The CSS background-repeat property controls whether and how a background image repeats within an element.

Background images repeat horizontally and vertically by default. You can prevent repetition, limit it to one direction, or control how repeated images are distributed and resized to fit the available background area.

Default Background Repetition

The initial value of background-repeat is repeat. When a background image is smaller than the available background area, the browser repeats the image horizontally and vertically to fill the area.

.box {
  background-image: url("images/pattern-200x200.png");
}

Small patterns and textures are often designed specifically to take advantage of this behavior. When the edges of a pattern match correctly, the repeated tiles can appear to form one continuous background.

repeat

The repeat value repeats the background image in both the horizontal and vertical directions.

.box {
  background-image: url("images/pattern-200x200.png");
  background-repeat: repeat;
}

This is useful for repeating patterns and textures that are intended to cover an area larger than the original image.

no-repeat

The no-repeat value displays the background image once without creating additional copies.

.box {
  background-image: url("images/leaves-400x400.png");
  background-repeat: no-repeat;
}

This is commonly used for decorative graphics, photographs, logos, and other images that should appear only once. The image can then be placed more precisely with background-position.

repeat-x

The repeat-x value repeats the background image horizontally across the element without repeating it vertically.

.box {
  background-image: url("images/pattern-horizontal-600x100.png");
  background-repeat: repeat-x;
}

Horizontal repetition can be useful for decorative strips, horizontal patterns, and other backgrounds intended to extend across the width of an element.

repeat-y

The repeat-y value repeats the background image vertically without repeating it horizontally.

.box {
  background-image: url("images/pattern-vertical-100x600.png");
  background-repeat: repeat-y;
}

Vertical repetition can be useful for decorative edges, vertical patterns, and backgrounds designed to continue down the height of an element.

space

The space value repeats the background image as many times as possible without clipping a repeated tile. Any remaining space is distributed between the repeated images.

.box {
  background-image: url("images/pattern-200x200.png");
  background-repeat: space;
}

The first and last repeated images remain against the edges of the background positioning area when at least two copies fit. The space between the images changes as the size of the element changes.

round

The round value repeats the background image while adjusting its displayed size so a whole number of copies fit within the available background area.

.box {
  background-image: url("images/pattern-200x200.png");
  background-repeat: round;
}

Unlike space, which can add space between repeated images, round can scale the background image so the repeated tiles fit without being clipped.

Two-Value background-repeat Syntax

The background-repeat property can use two values. The first controls horizontal repetition and the second controls vertical repetition.

.box {
  background-repeat: repeat no-repeat;
}

This repeats the image horizontally while preventing vertical repetition.

.box {
  background-repeat: no-repeat repeat;
}

This prevents horizontal repetition while allowing the image to repeat vertically.

The values repeat-x and repeat-y are convenient shorthand forms for these common combinations.

Background Repeat Example

The following example uses our square pattern image with the default repeat behavior.

.box {
  background-image: url("images/pattern-200x200.png");
  background-repeat: repeat;
}

Open the example in the editor and change repeat to no-repeat, repeat-x, repeat-y, space, or round. The visible changes make it easy to compare how each value controls the repeated background tiles.

Play in Editor