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:

body { 
    min-height: 100vh;
    background: url(steven-tyler.jpg); 
    background-repeat: round;
}

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.

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:

body { 
    min-height: 100vh;
    background: url(steven-tyler.jpg); 
    background-repeat: round;
    background-size: 200px 200px;
}

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.

Starting with an image like this:

We can tile the image in the background of a <header> with:

body > header { 
    min-height: 200px;
    background-image: url(aerosmith-logo.svg);
    background-size: 200px;
}

We can let the browser determine where to space the logo by adding:

body > header { 
    background-repeat: space;
}

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-x background-position-y, bringing those features into parity with all other modern browsers.

Photograph by Daigo Oliva, used under a Creative Commons Attribution-ShareAlike 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/ozkKgP