New Repeating Background Image Options in CSS3

Contributing Editor

In CSS2.1, the background-repeat property had four options: no-repeat, repeat, repeat-x and repeat-y. While these are undoubtedly useful, they don’t permit finer control over the repeating process and tiles will be clipped if they don’t fit the container an exact number of times.

CSS3 introduces two new options: space and round

background-repeat: space

The space option will repeat a tile horizontally and vertically without clipping or resizing the or image, e.g.


background-repeat: space;

background repeat space

background-repeat: round

The round option will repeat a tile horizontally and vertically without clipping, but the image may be resized, e.g.


background-repeat: round;

background repeat round

Assume we have a background image with a width 100px (actual or resized using the CSS3 background-size property). This is contained in an element with 520 horizontal pixels, so:

round(520 / 100) = round(5.2) = 5

The browser will render five images in the space but adjust the image width to 104px (520px / 5). The image is made wider to fit the container.

Differing Horizontal and Vertical Repeats

background-repeat can be passed two values to alter the horizontal and vertical repeating, e.g.


background-repeat: round space; /* width resizes, height static */
background-repeat: space round; /* width static, height resizes */
background-repeat: space no-repeat; /* fit tiles horizontally only */

Changing the Background Position

Tiling with space or round will only work as you expect if the background-position is set to 0 0. You are free to change it; the image sizes and spacing will be tiled the same but the top-left offset is moved accordingly.

Browser Compatibility

Two browsers support the space and round properties. Guess which ones? You’re wrong: it’s IE9 and Opera. At the time of writing, they are not implemented in Firefox, Chrome or Safari. It gets worse:

  • When Firefox encounters space or round it falls back to repeat.
  • When Chrome or Safari encounter space or round they fall back to no-repeat. In addition, the webkit browsers appear to recognize the properties but don’t render them correctly.

Great. Thanks guys.

The only way to achieve any sort of consistency is to force Firefox to render like webkit, e.g.


#element
{
	background-repeat: no-repeat;
	background-repeat: space;
}

Therefore:

  • IE9 and Opera will correctly repeat a tile horizontally and vertically without clipping or resizing the image.
  • Firefox won’t recognize space, falls back to the no-repeat setting and shows a single tile.
  • Chrome and Safari recognize space but incorrectly show a single, non-repeated title.

Nasty. It might be best to wait a few more months until Mozilla and Webkit add full support for CSS3 background-repeat.

View the CSS3 background-repeat demonstration page…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Matthew P

    Thanks for putting the time to test these Craig, saves everyone some time and possibly missing something along the way.

    That’s honestly a really disappointing implementation which is essentially breaking the most fundamental rule of css for handling unsupported features which has been a part of the spec since the beginning of time. The entire background-repeat declaration needs to be thrown out when an unsupported/unrecognized value is encountered, which allows for proper cascading of rules and for developers to decide how the property should be set if unsupported – instead the choice has been made for us, and honestly it’s a bad one at that.

  • Alex

    Nice one, Craig. There could be some nice results with this stuff, but looks like we’ll need to give it a wide berth till support evens out a bit.

  • Stevie D

    What happens if you use ’round’ when the vertical and horizontal axes need to be scaled differently? I assume the image is scaled up or down, whichever gets closest to the intrinsic size of the element … and that’s all very well if you’re scaling in one plane but what about two? Will it space the images in one plane, or will it stretch them to a different aspect ratio?

    • http://www.optimalworks.net/ Craig Buckler

      Round will scale the image width and height to the nearest whole size in either direction so it fits the available space. The image above shows slightly fatter sheep but, by changing the container dimension, they could appear tall and thin.