The background-repeat Property

The CSS background-repeat property controls whether and how a background image tiles (repeats) to fill the entire area of the element. This property is crucial when using small patterns or icons as backgrounds.

By default, the browser repeats a background image horizontally and vertically until it fills the container.

Syntax and Values

The background-repeat property accepts several keyword values to define the tiling behavior.

Value	Description	Behavior
repeat	The default value. The image tiles horizontally and vertically to fill the element.	Full tiling (X and Y).
no-repeat	The image is displayed only once at its specified background-position.	No tiling.
repeat-x	The image tiles horizontally only (along the X-axis).	Tiles across the width.
repeat-y	The image tiles vertically only (along the Y-axis).	Tiles down the height.
space	The image is tiled as many times as possible without clipping, and any remaining space is distributed evenly between the tiles.	Tiles with spacing.
round	The image is tiled as many times as possible. If the tiles don't fit exactly, they are slightly resized (rounded) to ensure a whole number of tiles fit the container perfectly.	Tiles with resizing.

Example

To display a logo only once in the bottom right corner:

styles.css

.footer-logo {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-position: right bottom;
}

Two-Value Syntax (X and Y Control)

You can also specify two values to control the X-axis and Y-axis repetition independently.

styles.css

selector {
  background-repeat: <horizontal-repeat> <vertical-repeat>;
}

Syntax	Equivalent	Description
repeat no-repeat	repeat-x	Tiles horizontally, but not vertically.
no-repeat repeat	repeat-y	Tiles vertically, but not horizontally.
repeat repeat	repeat	Tiles both horizontally and vertically.

Interactive background-repeat Demo

Use the live editor to change the background-repeat value. The image used in this demo is a small square to clearly show the tiling effect.