The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

Default Behavior

By default, a background image repeats both vertically and horizontally. This creates a tiling effect. While useful for small patterns, it can be undesirable for logos or large hero images.

Controlling Repetition

You can control the repetition using the following values:

• repeat: The image is repeated in both directions (default).
• repeat-x: The image is repeated only horizontally.
• repeat-y: The image is repeated only vertically.
• no-repeat: The image is not repeated. It is shown only once.

Advanced Values: Space and Round

Space: The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.

Round: The image is repeated as often as will fit within the available space. If it doesn't fit a whole number of times, the images are rescaled (stretched or squished) so they do.