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.

Read more about Background Round and Space

When creating image framing effects most designers opt for one of two choices: create the result entirely in Photoshop, or draw HTML “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">

Read more about Image Matting Effects With CSS

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 HTML I used in the earlier example down to just one figure element, while adding richer effects with CSS.

The HTML used in the example is now simply:

Read more about Filtered HTML Image Caption