Background repeat

The background-repeat property controls how a background image is repeated (tiled) within an element.

By default, background images repeat both horizontally and vertically to fill the entire background area. This property lets you customize that behavior.

  • The background-repeat property works best when combined with background-size and background-position for precise control over background images.

  • space and round are newer values and may have limited support in very old browsers.

  • If the background image is smaller than the element, repeat fills the space by tiling the image.

  • With no-repeat, if the image is smaller than the container, empty space remains visible.

Possible Values

Value
Units
Description

Repeat

N/A

Default. The background image repeats both horizontally and vertically to fill the element.

Repeat-X

N/A

The background image repeats only horizontally (along the X-axis).

Repeat-Y

N/A

The background image repeats only vertically (along the Y-axis).

No Repeat

N/A

The background image is not repeated; it appears only once.

Space

N/A

The background image repeats as much as possible without clipping, and extra space is distributed between the images.

Round

N/A

The background image repeats and scales (stretches or shrinks) to fill the space without clipping.

Examples

  1. Default Repeat:

  1. Horizontal Repeat:

  1. Vertical Repeat:

  1. No Repeat:

  1. Space Repeat:

  1. Round Repeat:

PreviousBackground SizeNextBorder

Last updated