Using cover and contain values for the background-size property makes it easy to create background images that cover the complete browser window, but for a very long time web developers didn’t have control over much else: smaller tiled images repeated infinitely in backgrounds, with no control over how they started or finished.

By default, background images tile both vertically and horizontally; CSS provided the opportunity to constrain this to one axis with background-repeat: repeat-x or background-repeat: repeat-y, but that’s as far as it went. What designers needed was “flexbox for backgrounds”: the ability to evenly distribute tiled images.

With the release of Firefox 49, that feature is now available in every major browser, in the form of round and space values.

Round & Round

background-repeat: round ensures even tiling of repeated images in backgrounds: tiles always end on a complete version of the image. As one example, for the body:

Note that this requirement for an “even end” will mean that the image will be stretched or squished until there is either enough space for another tile row (or column), or a row or column of images can be removed. You can see this in the example at the top of this article, as you resize the browser window.

Note that using a single percentage value for background-size is equivalent to the effect of roundexcept:

The image is only tiled evenly on the horizontal axis, not vertically

So long as a single value is used, the image is never stretched.

There will always be the same number of tiles across the background, meaning that individual image tiles may become very small at narrow viewport sizes without @media query intervention.

It’s also important to note that round is in effect both horizontally and vertically for background images by default; I discuss variations at the end of this article.

Very frequently you’ll need to resize the image to make it fit in certain designs:

As always, be careful of resizing images too far for backgrounds. If designing for High-DPI screens, image-set() may be useful for sending different sized versions of the background image to Retina screens.

Spaced

Contrary to what you might assume from the name, space does not allow you to control the spacing between image tiles; rather, it adjusts the space between the tiles relative to the size of the containing element, allowing repetitions to fill in the space where needed.

Producing the following: the effect is best seen if you resize the browser window.

background-repeat: space might be compared to text-align: justify;: it moves background tiles around to take up the space provided to it. Alternatively, it might be thought of as the opposite of round: it lets image tiles expand apart, without stretching, until another row or column of tiles can be inserted.

Absolute control over space between tiles in a repeated background image will still mean editing the original graphic to add more space to it, and viewing the result in the browser. It’s possible in some cases to do this easier with SVG <pattern> elements.

Combination

A single value of round or space for background-repeat will affect image tiles in both directions for an element, but it’s entirely possible to use round and space together to affect tiles in different ways; some combinations of these values are shown in the CodePen associated with this article.

Just Push Play

Browser support for round and space is now excellent: outside of Firefox 49, it’s supported in IE 9+, Opera 10.5+, and essentially every version of every other modern browser.

It should also be noted that Firefox 49 also brings support for background-position-xbackground-position-y, bringing those features into parity with all other modern browsers.