Background Repeat and its Possibilities
There is a humble CSS Property that gets overlooked a lot, the humble
I recently only learned that there a few options other than
repeat available to this, and that they have really good browser support.
There are two CSS level 3 specification additions to the
background-repeat property -
With a repeating background image, using this keyword will repeat the image as many times as it can without clipping the image. Much like flexbox and
justify-content: space-between, it will distribute the remaining space between the items that fit. The images in the background will stay their original size (or the one specified by
Note - if you use the
space value, for the most part a
background-position declaration will be ignored.
I think this value is even more interesting, because what it does is actually scales the repeated image such that all available room is taken up, until there is enough room for another instance of the image.
In the below example I've added an SVG background image with a border to illustrate how the image will scale up until another can fit, then they all scale down again:
Just in case you didn't know the other keywords, they are:
This is the default for background images - they will repeat in a tile-like fashion in both dimensions.
background-repeat: repeat-x; /* repeats horizontally */
background-repeat: repeat-y; /* repeats vertically */
If you only want a background to repeat in one direction, use these.
If you don't want any repetition at all.
And it supports these global values:
Two Value Syntax
You can also specify separate repeat rules in two dimensions with the two value syntax:
background-repeat: horizontal-keyword vertical-keyword;
So you could have:
background-repeat: repeat space;
See how the background tile clips because we use
repeat in the horizontal dimension?
Multiple Background Images
You can even manipulate
background-repeat for multiple background images, so each follows different rules.
background-image: url(path/to/image_1), url(path/to/image_2);
background-repeat: round round /* image_1 */, space no-repeat /* image_2 */;
So, take a fresh look at
background-repeat - it can provide a lot of opportunities for happy discoveries.