CSS background-repeat space: Tile Patterns Without Clipping

The background-repeat: space property in CSS solves the problem of cropped patterns by calculating how many whole images fit within a container and distributing any remaining empty space evenly between them. Unlike standard background repetition, which blindly tiles until the boundary cuts off the graphic, space ensures that edges remain sharp and intact. This article explains the underlying mechanism, mathematical logic, and edge cases of using background-repeat: space in web layouts.

The Problem with Default Tiling

By default, background-repeat: repeat tiles a background image starting from the top-left origin across the X and Y axes. If the dimensions of the container are not an exact multiple of the image dimensions, the final row or column of the pattern is abruptly sliced off at the element's edge. This creates an unpolished appearance, especially for distinct geometric shapes, icons, or decorative borders.

The Mechanism of background-repeat: space

When you apply background-repeat: space, the browser handles the tiling calculation through three distinct steps:

  1. Calculates Whole Fits: The browser measures the width (or height) of the container and divides it by the width (or height) of the background image. It rounds down to the nearest whole integer to determine the maximum number of full, unscaled tiles that can fit without overflowing.
  2. Pins the Outer Tiles: The first tile is placed flush against the starting boundary, and the last tile is placed flush against the ending boundary.
  3. Distributes Remaining Space: The browser takes the leftover dimensional space—the remainder from step one—and divides it equally among the gaps separating the tiles.

For example, if a container is 450 pixels wide and the background image is 100 pixels wide:

  • Four whole images fit (\(4 \times 100\text{px} = 400\text{px}\)).
  • 50 pixels of unused space remain.
  • The 50 pixels are divided across the 3 gaps between the 4 tiles, resulting in approximately 16.66 pixels of empty space between each tile.
  • No image data is cropped or distorted.

Syntax and Axis Control

The space keyword can be applied globally to both axes or configured individually for horizontal and vertical directions:

/* Tiles with spacing on both horizontal and vertical axes */
.pattern-box {
  background-image: url('pattern.svg');
  background-repeat: space;
}

/* Spaces horizontally, prevents vertical repeat */
.banner-strip {
  background-image: url('star.svg');
  background-repeat: space no-repeat;
}

The Single-Tile Edge Case

If the container becomes smaller than the background image itself, the browser cannot fit a single whole tile alongside empty spacing. In this specific scenario, space defaults to displaying a single instance of the image aligned according to background-position, and the image will be clipped by the container boundary.

space vs. round

CSS offers another anti-clipping value: round. While space preserves the original dimensions of the image and fills excess area with blank space, round rescales the image dimensions up or down so that a whole number of tiles fills the container completely without any gaps. Choosing space is ideal when the original size and visual integrity of the asset must remain fixed, and whitespace between units is aesthetically acceptable.