background-repeat: round and space (Tile Without Clipping)

The default background-repeat: repeat tiles your image starting from the top-left and clips whatever does not fit at the right and bottom edges. Two keywords fix that without you doing any arithmetic. round rescales the tiles slightly so a whole number fits across the box, and space keeps every tile at its natural size and spreads the leftover room out as even gaps. Neither one clips.

.repeat { background-repeat: repeat; }  /* default: last tile gets cut off */
.round  { background-repeat: round; }   /* rescales tiles, no clipping */
.space  { background-repeat: space; }   /* even gaps, no clipping */

That is the whole decision: do you want the tile size to stay exact (space) or the tiling to stay seamless (round)? Below is what each one actually does, and the two-value syntax for controlling the horizontal and vertical axes separately.

Why the default clips

repeat lays tiles edge to edge from the origin corner and does not care whether the box is an exact multiple of the tile size. If your tile is 100px wide and the box is 1099px wide, you get ten full tiles and a 99px sliver of an eleventh, sheared off at the right edge. For a photographic texture nobody notices. For a pattern with a recognizable motif (a logo, an icon, anything with a clear shape) the chopped-off tile at the edge looks like a bug, because it is one.

round and space are the two ways out, and they trade off in opposite directions.

round: rescale so a whole number fits

round stretches or squashes the image so an integer number of tiles fills the box exactly. With a 100px tile in a 1099px box, the browser fits ten tiles and scales each to 109.9px wide. Cross 1100px and an eleventh tile fits, so each snaps back to 100px. There is no gap and no clip, but the tile is distorted: the amount of distortion is whatever it takes to make the count come out whole, and it changes as the box resizes.

.hero {
  background-image: url("weave.png");
  background-repeat: round;
}

Because round changes the rendered tile size, it interacts with background-size: the size you set is the starting point, and round adjusts from there to reach a whole count. Reach for round when the image is a seamless, scalable pattern (a fabric weave, a subtle noise texture, a tileable gradient motif) where a few percent of stretch is invisible but a clipped edge would not be. Avoid it for anything with text or hard geometry, where the distortion shows.

space: keep the size, distribute the gaps

space does the opposite. It keeps every tile at its exact natural size, fits as many whole tiles as it can, pins the first and last tiles to the two edges, and divides the remaining space into equal gaps between them. Per MDN: the image repeats as much as possible without clipping, the first and last are pinned to the edges, and the whitespace is evenly distributed. Ten 100px tiles in an 1100px box leave 100px of slack spread as nine 11.1px gaps.

.iconstrip {
  background-image: url("icon.svg");
  background-repeat: space;
}

This is the right call for an icon strip or a row of discrete marks where each tile must stay pixel-exact (an icon that is stretched 9% looks wrong in a way a texture does not). The cost is the gaps, which is fine for separated icons and bad for a pattern that is meant to read as continuous. One edge case to know: if only a single tile fits, space has nothing to distribute, and on that axis the CSS Backgrounds spec hands placement back to background-position (which defaults to 0 0, so by default the lone tile sits at the start, not centered). Set background-position if you want it elsewhere.

The two-value syntax: round space

background-repeat takes two values, where the first sets the horizontal behavior and the second sets the vertical. That lets you mix them per axis.

.banner {
  background-image: url("scallop.png");
  /* rescale across, even gaps down */
  background-repeat: round space;
}

round space rounds horizontally and spaces vertically. repeat no-repeat is the same idea you already know written longhand (the older repeat-x is exactly repeat no-repeat, and repeat-y is no-repeat repeat). A single value applies to both axes, so round means round round. This is where the tiling really earns its keep: a horizontal banner that should scale seamlessly along its length but sit on tidy rows down its height is one declaration.

round and space are widely supported across current browsers (Chrome, Edge, Firefox, and Safari), so for general web use you can reach for them without a fallback. If you must support something ancient, an unknown background-repeat value is simply ignored and the property keeps its previous value, so set repeat first and let round/space override it where understood.

For controlling the tile dimensions that round and space work from, see CSS background-size and how it scales an image. To target the elements carrying these backgrounds with modern selectors, the :has() relational selector is worth knowing, and for treating the background image itself, CSS filters layer cleanly on top.

FAQ

See also

• CSS fixed background image and how background-size scales it: the sizing property that round and space work from, plus background-attachment.
• The :has() relational selector: target the elements carrying these tiled backgrounds based on what they contain.
• CSS filters: recolor, blur, or adjust the tiled background image itself with filter and backdrop-filter.