Backgroundrepeat

Background-repeat is a CSS property that controls how background images are tiled within an element. It applies to each background layer and works in conjunction with other background properties such as background-image, background-position, and background-size.

Syntax and values

Background-repeat accepts one or two keywords chosen from the following set: repeat, repeat-x, repeat-y, no-repeat, space, and round. When two values are provided, the first applies to the horizontal axis and the second to the vertical axis. This property can be used for single or multiple backgrounds (layers) by listing values for each layer.

Common values explained

- repeat: the background image is tiled both horizontally and vertically.

- repeat-x: the image repeats only along the horizontal axis.

- repeat-y: the image repeats only along the vertical axis.

- no-repeat: the image is shown once and not tiled.

- space: tiles are repeated with maximum possible gaps between them, distributing the remaining space as gaps.

- round: the image is scaled so that an integer number of tiles fits within the container, avoiding partial tiles.

Notes on usage

In multi-layer backgrounds, each layer can specify its own background-repeat value. The behavior also interacts with background-origin, background-clip, and background-size; for example, background-size can influence how space or round tiling is applied by determining the per-tile size. Background-repeat is broadly supported in modern browsers and is a fundamental tool for controlling decorative patterns without extra markup.