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.

Photograph of a Chinese model dressed as a princess reclining on a wooden bench

When creating image framing effects most designers opt for one of two choices: create the result entirely in , or draw “boxes inside boxes” that are then manipulated with CSS. In a previous article I demonstrated how to create complex framing effects by using border-image; in this article, I’ll approach the more subtle art of matting.

“Matting”, as referenced in the art framing industry, is the separation of artwork from its frame by a series of mounts. These mounts are often made from cardboard in different colors and textures. The goal of this article to recreate that visual effect on a web page without adding any elements around an image; the only markup will be:

<img class="mat" src="chinese-princess.jpg" alt="Photograph of a Chinese princess reclining on a wooden bench">
Got milk?

Continuing on from my example last week ("Creating Animated Inset Captions With Filtered Backgrounds Over Responsive Images"), I decided to do a black and white version, which you can see above.

One goal shared by designers and developers is to create ever-simpler solutions: less code, not more. With a little experimentation, I was able to get the I used in the earlier example down to just one figure element, while adding richer effects with .

The HTML used in the example is now simply: