Question

I’m reading CSS3 Background & Border Module, and for the background-repeat property, I see two new values, namely space and round.

While it has the description of what they do, I can’t figure out how they differ from the ordinary repeat value. The example given there is not really a good one, and I can get the result with repeat value either.

Can anyone please make a good differentiation between them, preferably giving some graphical cues?

Answer 1

Quoting Mozilla developer network, emphasis mine:

repeat: The image is repeated in the given direction as much as needed
to cover the whole background image painting area. The last image
may be clipped if the whole thing won’t fit in the remaining area.

space: The image is repeated in the given direction as much as
needed to cover most of the background image painting area, without
clipping an image. The remaining non-covered space is spaced out
evenly between the images. The first and last images touches the
edge of the element. […]

round: The image is repeated in the given direction as much as needed
to cover most of the background image painting area, without
clipping an image. If it doesn’t cover exactly the area, the tiles
are resized in that direction in order to match it.