A set of wind farm turbines against bright green hills

Reading the incredibly useful caniuse.com the other day, I was pleased and surprised to see that CSS variables are now handled in every major browser except one. This means it is overdue for me to address the use of variables in modern development, as it will be practical to use them directly in your stylesheets in the very near future…

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.